// @out: style.css
// ═══════════════════════════════════════════════════════════════════════════
// WP Compress — Master Stylesheet
// ═══════════════════════════════════════════════════════════════════════════
// Variables + font-face inline, everything else in partials.
// Backup of the original 18K-line file: style.less.backup-pre-rebuild
// ═══════════════════════════════════════════════════════════════════════════


// ─── Layout ──────────────────────────────────────────────────────────────
@sidebar-width: 220px;
@sidebar-gap: 15px;

// ─── Whites & near-whites ────────────────────────────────────────────────
@color-white: #ffffff;
@color-bg-frost: #f1f5f9;
@color-bg-neutral: #fafafa;
@color-ice: #eff7ff;
@color-ice-muted: #eff1f4;
@color-ice-deep: #e8f1ff;

// ─── Primary blues ───────────────────────────────────────────────────────
@color-primary: #5cb1ff;
@color-gradient-start: #59a8e3;
@color-gradient-mid: #4c89eb;
@color-gradient-end: #4273f0;
@color-blue: #3b82f6;
@color-blue-bright: #3983ee;
@color-blue-deep: #1376d1;
@color-blue-medium: #549de6;
@color-blue-sky: #5498f9;
@color-blue-vivid: #2563eb;

// ─── Borders & light grays ──────────────────────────────────────────────
@color-border: #e2e8f0;
@color-border-medium: #d1d5db;
@color-border-blue: #bfdbfe;
@color-border-accent: #c5d3e3;
@color-border-silver: #c5c5c5;

// ─── Text colors ─────────────────────────────────────────────────────────
@color-text-dark: #1e293b;
@color-text-secondary: #64748b;
@color-text-body: #374151;
@color-text-charcoal: #333333;
@color-text-heading: #111827;
@color-text-base: #212529;
@color-text-light: #9199a6;
@color-text-navy: #314b72;
@color-navy-dark: #19335b;
@color-text-slate: #475569;

// ─── Gray tones ──────────────────────────────────────────────────────────
@color-gray-muted: #a0aab6;
@color-gray-text: #94a3b8;
@color-gray-medium: #a2a2a2;
@color-gray-dim: #7c7f84;
@color-gray-dark: #595959;
@color-gray-secondary: #6b7280;

// ─── Success / green ─────────────────────────────────────────────────────
@color-success: #22b73a;
@color-success-bg: #effbf1;
@color-success-light: #5ecb74;
@color-success-teal: #3ad591;
@color-success-emerald: #10b981;
@color-success-dark: #059669;

// ─── Error / red ─────────────────────────────────────────────────────────
@color-error-bg: #fef2f2;
@color-error: #ef5a5a;
@color-error-border: #fecaca;
@color-red: #ff0000;
@color-error-accent: #ef4444;
@color-error-dark: #991b1b;
@color-error-bg-warm: #ffe7e7;
@color-error-bg-medium: #ffd6d6;
@color-error-pale: #fca5a5;
@color-error-darkest: #7f1d1d;
@color-coral: #ec5c4d;
@color-red-brand: #ec0012;

// ─── Warning / orange ────────────────────────────────────────────────────
@color-warning: #fbae40;
@color-warning-dark: #f58220;

// ─── Blue UI & links ─────────────────────────────────────────────────────
@color-blue-soft: #6ea0f2;
@color-blue-wash: #b2e0ff;
@color-blue-gray: #acc3dc;
@color-blue-alt: #5297e8;
@color-blue-link: #2699fd;
@color-blue-pale: #dbeafe;

// ─── Purple / indigo ─────────────────────────────────────────────────────
@color-purple-blue: #404fd7;
@color-purple-blue-light: #3c4cdf;
@color-indigo: #5f65f6;
@color-blue-electric: #3858e9;

// ─── Cyan / teal ─────────────────────────────────────────────────────────
@color-cyan: #3fc3ee;
@color-teal: #0a9bd6;
@color-sky: #09a8fc;
@color-aqua: #00f0ff;

// ─── Dark / black ────────────────────────────────────────────────────────
@color-near-black: #16181b;
@color-black: #000000;
@color-charcoal: #3c434a;
@color-dark-indigo: #0a0641;
@color-midnight: #171a32;
@color-dark-plum: #320a28;

// ─── Misc colors ─────────────────────────────────────────────────────────
@color-steel: #8393a9;
@color-silver: #b1bac2;
@color-gray-blue-muted: #bbc8cd;
@color-wp-blue: #2271b1;
@color-navy-purple: #3a3b5d;
@color-link-blue: #007bff;
@color-link-blue-dark: #0056b3;
@color-gray-neutral: #737373;
@color-border-faint: #e0e0e0;

// ─── Font families ───────────────────────────────────────────────────────
@font-bold: 'proxima_bold', sans-serif;
@font-semibold: 'proxima_semibold', sans-serif;
@font-regular: 'proxima_regular', sans-serif;
@font-light: 'proxima_light', sans-serif;
@font-code: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
@font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

// ─── Shadows ─────────────────────────────────────────────────────────────
@shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
@shadow-blue-glow: 0 4px 12px rgba(76, 137, 235, 0.1);
@shadow-hover-lift: 0 8px 20px -4px rgba(76, 137, 235, 0.15);

// ─── Easing Tokens ──────────────────────────────────────────────────────
@ease-entrance:    cubic-bezier(0.36, 0.66, 0.04, 1);  // decelerate — arrivals
@ease-interactive: cubic-bezier(0.4, 0, 0.2, 1);       // standard — hover/toggle
@ease-expressive:  cubic-bezier(0.34, 1.56, 0.64, 1);  // overshoot — tactile pops

// ─── Transitions ─────────────────────────────────────────────────────────
@transition-fast:     all 0.15s @ease-interactive;
@transition-default:  all 0.2s @ease-interactive;
@transition-fast-out: all 0.15s ease-out;
@transition-transform: transform 0.2s @ease-interactive;
@transition-smooth:   all 0.2s @ease-entrance;
@transition-snappy:   all 0.18s @ease-interactive;
@transition-fast-inout: all 0.15s ease-in-out;
@transition-bounce:   all 0.35s @ease-expressive;

// ─── Border radii ────────────────────────────────────────────────────────
@radius-xs: 3px;
@radius-sm: 4px;
@radius-default: 5px;
@radius-base: 6px;
@radius-md: 8px;
@radius-lg: 10px;
@radius-input: 12px;
@radius-card: 16px;
@radius-xl: 20px;
@radius-2xl: 24px;
@radius-25: 25px;
@radius-pill: 30px;
@radius-pill-md: 34px;
@radius-pill-lg: 40px;
@radius-pill-xl: 50px;
@radius-pill-2xl: 60px;
@radius-full: 100px;
@radius-circle: 50%;

// ─── Font-size scale ─────────────────────────────────────────────────────
@font-size-xs: 11px;
@font-size-sm: 13px;
@font-size-base: 14px;
@font-size-md: 16px;
@font-size-lg: 18px;
@font-size-xl: 20px;
@font-size-2xl: 24px;
@font-size-3xl: 28px;

// ─── Spacing scale (4px grid) ────────────────────────────────────────────
@space-xs: 4px;
@space-sm: 8px;
@space-md: 12px;
@space-base: 16px;
@space-lg: 20px;
@space-xl: 24px;
@space-2xl: 32px;
@space-3xl: 40px;


// ═══════════════════════════════════════════════════════════════════════════
// @font-face declarations
// ═══════════════════════════════════════════════════════════════════════════

@font-face {
  font-family: 'proxima_light';
  src: url('../../fonts/proxima/ProximaNovaLight.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'proxima_regular';
  src: url('../../fonts/proxima/ProximaNovaRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'proxima_semibold';
  src: url('../../fonts/proxima/ProximaNovaSemibold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'proxima_bold';
  src: url('../../fonts/proxima/ProximaNovaBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


// ═══════════════════════════════════════════════════════════════════════════
// Partials — build order matches visual dependency chain
// ═══════════════════════════════════════════════════════════════════════════

@import '_animations';       // All 32 @keyframes
@import '_base';             // WP admin resets, global utilities
@import '_layout';           // Container, flex-body, sidebar/content grid
@import '_header';           // Logo, actions, mobile drawer
@import '_sidebar-nav';      // Tab list, items, active states
@import '_section-cards';    // Tab content boxes, setting rows, toggles
@import '_forms';            // Inputs, textareas, dropdowns, sliders, buttons
@import '_dashboard';        // Stats, PageSpeed, charts, monitoring
@import '_lite';             // Lite/simple dashboard (CF banner, toggles, promo, stats)
@import '_smart-optimization'; // Smart Optimization tab (page table, filters, status)
@import '_cloudflare';       // Cloudflare integration form + accordions
@import '_modals';           // SweetAlert2 + all 30 popups
@import '_responsive';       // All breakpoints (1024, 768, 480, 375)
