/* ==========================================
   CANONICAL DESIGN TOKENS — single source of truth
   Loaded before all other CSS. Aliases legacy token
   names (--cc-v2-*, --cc-shell-*, --primary-*) so
   existing stylesheets continue to work unchanged.
   ========================================== */

/* CLS fix: metric-compatible fallback for Inter (Google Fonts, font-display:swap). Text first paints in
   Arial scaled to Inter's metrics, so the swap to real Inter no longer re-wraps headings / shifts layout. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica');
    font-weight: 100 599;
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica-Bold');
    font-weight: 600 900;
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}

:root {
    /* ---- Brand: deep navy ---- */
    --cc-brand-950: #101727;
    --cc-brand-900: #182239;
    --cc-brand-800: #20304c;
    --cc-brand-700: #284165;
    --cc-brand-600: #335587;
    --cc-brand-500: #4a6ca6;
    --cc-brand-400: #6e8dc1;
    --cc-brand-300: #95acd1;
    --cc-brand-200: #bcc9e1;
    --cc-brand-100: #dfe6f1;
    --cc-brand-50:  #f1f4f9;

    /* ---- Accent: warm gold (site shell / category pages) ---- */
    --cc-accent:        #d2a55b;
    --cc-accent-soft:   #f0e1c4;
    --cc-accent-strong: #b3873d;
    --cc-accent-ink:    #7d5a20;  /* gold for TEXT on accent-soft — AA 4.85:1 */

    /* ---- Calc accent: teal (calculator-body legacy palette) ---- */
    --cc-calc-accent-500: #00d4aa;
    --cc-calc-accent-text: #007a63; /* teal for TEXT on white — AA 5.3:1 (bright 500 is 1.9:1) */
    --cc-calc-accent-400: #00e6b8;
    --cc-calc-accent-300: #33ecc6;
    --cc-calc-accent-glow: rgba(0, 212, 170, 0.4);

    /* ---- Neutrals ---- */
    --cc-ink:           #172033;
    --cc-body:          #415067;
    --cc-muted:         #5b6a82;  /* AA on white and canvas */
    --cc-border:        #d8e0ea;
    --cc-border-strong: #c3cfdd;
    --cc-canvas:        #f4f6f2;
    --cc-surface:       #ffffff;
    --cc-surface-alt:   #eef3f7;

    /* ---- Semantic ---- */
    --cc-success: #2f7a5f;
    --cc-warning: #b97a1a;
    --cc-danger:  #b5544b;
    --cc-info:    #335587;

    /* ---- Typography ---- */
    --cc-font-body:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cc-font-display: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cc-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Modular type scale (1.200 minor third) — anchored at 1rem */
    --cc-text-xs:   0.75rem;    /* 12 */
    --cc-text-sm:   0.875rem;   /* 14 */
    --cc-text-base: 1rem;       /* 16 */
    --cc-text-md:   1.125rem;   /* 18 */
    --cc-text-lg:   1.25rem;    /* 20 */
    --cc-text-xl:   1.5rem;     /* 24 */
    --cc-text-2xl:  1.875rem;   /* 30 */
    --cc-text-3xl:  2.25rem;    /* 36 */
    --cc-text-4xl:  2.75rem;    /* 44 */

    --cc-leading-tight:   1.2;
    --cc-leading-snug:    1.35;
    --cc-leading-normal:  1.55;
    --cc-leading-relaxed: 1.7;

    --cc-tracking-tight:  -0.02em;
    --cc-tracking-normal: 0;
    --cc-tracking-wide:   0.04em;

    /* ---- Spacing (4-pt baseline) ---- */
    --cc-space-0:  0;
    --cc-space-1:  0.25rem;
    --cc-space-2:  0.5rem;
    --cc-space-3:  0.75rem;
    --cc-space-4:  1rem;
    --cc-space-5:  1.25rem;
    --cc-space-6:  1.5rem;
    --cc-space-8:  2rem;
    --cc-space-10: 2.5rem;
    --cc-space-12: 3rem;
    --cc-space-16: 4rem;
    --cc-space-20: 5rem;
    --cc-space-24: 6rem;

    /* ---- Radii ---- */
    --cc-radius-xs:   4px;
    --cc-radius-sm:   8px;
    --cc-radius-md:   12px;
    --cc-radius-lg:   18px;
    --cc-radius-xl:   24px;
    --cc-radius-pill: 999px;

    /* ---- Shadows ---- */
    --cc-shadow-xs: 0 1px 2px rgba(16, 23, 39, 0.05);
    --cc-shadow-sm: 0 2px 10px rgba(16, 23, 39, 0.05);
    --cc-shadow-md: 0 14px 35px rgba(17, 27, 44, 0.08);
    --cc-shadow-lg: 0 24px 60px rgba(17, 27, 44, 0.12);
    --cc-shadow-xl: 0 32px 80px rgba(17, 27, 44, 0.18);
    --cc-shadow-focus: 0 0 0 3px rgba(74, 108, 166, 0.35);

    /* ---- Motion ---- */
    --cc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --cc-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
    --cc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cc-dur-fast:    150ms;
    --cc-dur-base:    250ms;
    --cc-dur-slow:    400ms;

    /* ---- Layout ---- */
    --cc-max-content: 1280px;
    --cc-header-h:    64px;
    --cc-z-header:    1000;
    --cc-z-dropdown:  1100;
    --cc-z-modal:     1200;
    --cc-z-toast:     1300;

    /* ===== Legacy aliases — keep existing CSS working ===== */

    /* ui-v2.css */
    --cc-v2-ink:           var(--cc-ink);
    --cc-v2-body:          var(--cc-body);
    --cc-v2-muted:         var(--cc-muted);
    --cc-v2-border:        var(--cc-border);
    --cc-v2-border-strong: var(--cc-border-strong);
    --cc-v2-canvas:        var(--cc-canvas);
    --cc-v2-surface:       var(--cc-surface);
    --cc-v2-surface-alt:   var(--cc-surface-alt);
    --cc-v2-brand-950:     var(--cc-brand-950);
    --cc-v2-brand-900:     var(--cc-brand-900);
    --cc-v2-brand-800:     var(--cc-brand-800);
    --cc-v2-brand-700:     var(--cc-brand-700);
    --cc-v2-brand-600:     var(--cc-brand-600);
    --cc-v2-brand-500:     var(--cc-brand-500);
    --cc-v2-accent:        var(--cc-accent);
    --cc-v2-accent-soft:   var(--cc-accent-soft);
    --cc-v2-success:       var(--cc-success);
    --cc-v2-warning:       var(--cc-warning);
    --cc-v2-danger:        var(--cc-danger);
    --cc-v2-shadow-sm:     var(--cc-shadow-sm);
    --cc-v2-shadow-md:     var(--cc-shadow-md);
    --cc-v2-shadow-lg:     var(--cc-shadow-lg);
    --cc-v2-radius-sm:     var(--cc-radius-md);
    --cc-v2-radius-md:     var(--cc-radius-lg);
    --cc-v2-radius-lg:     var(--cc-radius-xl);
    --cc-v2-radius-pill:   var(--cc-radius-pill);
    --cc-v2-font-body:     var(--cc-font-body);
    --cc-v2-font-display:  var(--cc-font-display);

    /* site-shell.css */
    --cc-shell-ink:           var(--cc-ink);
    --cc-shell-body:          var(--cc-body);
    --cc-shell-muted:         var(--cc-muted);
    --cc-shell-border:        var(--cc-border);
    --cc-shell-border-strong: var(--cc-border-strong);
    --cc-shell-surface:       rgba(255, 255, 255, 0.94);
    --cc-shell-surface-alt:   var(--cc-surface-alt);
    --cc-shell-header:        rgba(16, 23, 39, 0.92);
    --cc-shell-header-border: rgba(216, 224, 234, 0.12);
    --cc-shell-brand:         var(--cc-brand-700);
    --cc-shell-accent:        var(--cc-accent);
    --cc-shell-shadow-sm:     var(--cc-shadow-sm);
    --cc-shell-shadow-md:     var(--cc-shadow-md);
    --cc-shell-shadow-lg:     var(--cc-shadow-lg);
    --cc-shell-radius-sm:     var(--cc-radius-md);
    --cc-shell-radius-md:     var(--cc-radius-lg);
    --cc-shell-radius-lg:     var(--cc-radius-xl);
    --cc-shell-radius-pill:   var(--cc-radius-pill);

    /* calculator-body.css (legacy --primary-*, --gray-*, --accent-*) — original navy values preserved */
    --primary-900: #0a1628;
    --primary-800: #0f2240;
    --primary-700: #153058;
    --primary-600: #1a3d6e;
    --primary-500: #1e4d8c;
    --primary-400: #3366aa;
    --primary-300: #5588cc;
    --primary-200: #88aadd;
    --primary-100: #c4d6ee;
    --primary-50:  #e8f0f8;

    --accent-500: var(--cc-calc-accent-500);
    --accent-text: var(--cc-calc-accent-text);
    --accent-400: var(--cc-calc-accent-400);
    --accent-300: var(--cc-calc-accent-300);
    --accent-glow: var(--cc-calc-accent-glow);

    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50:  #f9fafb;

    --success: var(--cc-success);
    --warning: var(--cc-warning);
    --error:   var(--cc-danger);

    --shadow-sm: var(--cc-shadow-xs);
    --shadow-md: var(--cc-shadow-sm);
    --shadow-lg: var(--cc-shadow-md);
    --shadow-xl: var(--cc-shadow-lg);
    --shadow-glow: 0 0 40px rgba(210, 165, 91, 0.15);

    --font-display: var(--cc-font-display);
    --font-body:    var(--cc-font-body);

    --space-1:  var(--cc-space-1);
    --space-2:  var(--cc-space-2);
    --space-3:  var(--cc-space-3);
    --space-4:  var(--cc-space-4);
    --space-5:  var(--cc-space-5);
    --space-6:  var(--cc-space-6);
    --space-8:  var(--cc-space-8);
    --space-10: var(--cc-space-10);
    --space-12: var(--cc-space-12);

    --radius-sm:   var(--cc-radius-xs);
    --radius-md:   var(--cc-radius-sm);
    --radius-lg:   var(--cc-radius-md);
    --radius-xl:   var(--cc-radius-xl);
    --radius-full: var(--cc-radius-pill);

    --transition-fast: var(--cc-dur-fast) var(--cc-ease);
    --transition-base: var(--cc-dur-base) var(--cc-ease);
    --transition-slow: var(--cc-dur-slow) var(--cc-ease);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --cc-dur-fast: 0ms;
        --cc-dur-base: 0ms;
        --cc-dur-slow: 0ms;
        --transition-fast: 0ms linear;
        --transition-base: 0ms linear;
        --transition-slow: 0ms linear;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}