/* ═══════════════════════════════════════════════════════════════
   PRAS Field — Design Tokens v2 ("2026 modernization")
   ───────────────────────────────────────────────────────────────
   Activated by `body[data-theme="v2"]` set by /js/theme-toggle.js
   when the URL contains `?theme=v2` or localStorage.theme === 'v2'.

   Additive layer — does NOT replace tokens.css. Both are loaded;
   v2 wins inside the data-theme="v2" scope. This lets us roll out
   page-by-page and revert instantly by clearing the URL param.

   The main shifts vs. v1:
     • Color: refined gold tonal range; less cream; tighter neutrals
     • Type: Inter Tight + Inter (replacing Barlow Condensed + DM Sans)
     • Depth: layered shadows + signature gold gradient
     • Motion: spring-physics easing on every interaction
     • Radius: bumped 8→10 for cards, 4→6 for chips
   ═══════════════════════════════════════════════════════════════ */

body[data-theme="v2"] {
  /* ══════════ Refined gold tonal range ══════════════════════════ */
  --gold-50:    #FBF6E8;   /* faintest tint — callout backgrounds */
  --gold-100:   #F4E8C4;   /* soft tint — hover backgrounds */
  --gold-300:   #DDC275;   /* light gold — secondary accent */
  --gold-500:   #C9A84C;   /* primary brand — kept canonical */
  --gold-600:   #B89636;   /* press state */
  --gold-700:   #9A7B26;   /* deep gold — text on tinted bg */

  /* Signature gradient — used on primary CTAs, active sidebar bar,
     hero KPI accent stripes. The brand's modernization moment. */
  --gold-grad:  linear-gradient(135deg, #E8C97A 0%, #C9A84C 50%, #A68A3E 100%);
  --gold-grad-vert: linear-gradient(180deg, #E8C97A 0%, #C9A84C 100%);

  /* ══════════ Light-mode neutrals (tighter than v1) ═════════════ */
  --surface-0:  #FAFAF7;   /* page bg — was #F9F7F2 */
  --surface-1:  #FFFFFF;   /* card bg */
  --surface-2:  #F5F2EB;   /* sunken surface, hover bg */
  --surface-3:  #EAE7DD;   /* heaviest sunken */

  --ink-1:      #1A1815;   /* primary text — slightly darker than v1's #2E2C27 */
  --ink-2:      #5A574F;   /* secondary text */
  --ink-3:      #8A877E;   /* tertiary / placeholder */
  --ink-inverse: #F0EBE0;  /* on dark surfaces */

  --line-1:     #EAE7DD;   /* subtle border */
  --line-2:     #D9D5C8;   /* stronger border, dividers */

  /* ══════════ Modernized semantic colors ════════════════════════ */
  --success-500: #0E9F6E;   /* modern green, not Bootstrap's bright */
  --success-bg:  #E0F4EB;
  --success-fg:  #084F37;
  --warning-500: #D97E2A;   /* warm amber */
  --warning-bg:  #FBEDDD;
  --warning-fg:  #6B3B0F;
  --danger-500:  #DC4A47;   /* coral red, refined */
  --danger-bg:   #FBE0DF;
  --danger-fg:   #7A1F1D;
  --info-500:    #3478F6;   /* true modern blue */
  --info-bg:     #E0EAFE;
  --info-fg:     #1B3F8C;

  /* ══════════ Typography (Geist — Vercel's open-source font) ════
     Geist is the "tech-forward" 2026 standard. Used by Vercel,
     v0, the Next.js docs. More personality + better letterforms
     than Inter while staying clean and modern. Loaded from Google
     Fonts in index.html. */
  --font-display-v2:  'Cinzel', Georgia, serif;                            /* proposal PDF + brand moments */
  --font-header-v2:   'Geist', 'Inter Tight', system-ui, sans-serif;       /* headings, buttons, nav */
  --font-body-v2:     'Geist', 'Inter', system-ui, sans-serif;             /* body */
  --font-mono-v2:     'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Override the v1 token aliases inside v2 scope so EVERY existing
     selector picks up Inter without per-component edits. */
  --font-display: var(--font-display-v2);
  --font-header:  var(--font-header-v2);
  --font-body:    var(--font-body-v2);

  /* ══════════ Refined depth + shadows ═══════════════════════════ */
  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-elev:   0 4px 14px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.06);
  --shadow-modal:  0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-focus-v2: 0 0 0 3px rgba(201, 168, 76, 0.28);

  /* Override v1 shadow tokens for legacy components */
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-elev);
  --shadow-3: var(--shadow-modal);
  --shadow-focus: var(--shadow-focus-v2);

  /* ══════════ Slightly bumped radii ═════════════════════════════ */
  --radius-sm-v2:  6px;
  --radius-v2:     10px;
  --radius-lg-v2:  14px;
  --radius-xl-v2:  18px;

  --radius-sm: var(--radius-sm-v2);
  --radius:    var(--radius-v2);
  --radius-lg: var(--radius-lg-v2);
  --radius-xl: var(--radius-xl-v2);

  /* ══════════ Spring-physics motion ═════════════════════════════ */
  /* Replaces v1's ease-out with cubic-bezier springs. Subtle but felt
     on every transition — this is the single biggest "expensive
     software" tell. */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast-v2: 150ms var(--ease-out-quart);
  --transition-v2:      220ms var(--ease-out-quart);
  --transition-slow-v2: 320ms var(--ease-out);
  --transition-spring:  280ms var(--ease-spring);

  /* Override v1 motion tokens */
  --transition-fast: var(--transition-fast-v2);
  --transition:      var(--transition-v2);
  --transition-slow: var(--transition-slow-v2);

  /* ══════════ Background + text token overrides ═════════════════ */
  /* These let v1 components automatically pick up v2 colors without
     per-selector edits in theme-v2.css. */
  --color-50:    var(--surface-0);
  --color-100:   var(--surface-2);
  --color-200:   var(--line-1);
  --color-300:   var(--line-2);
  --color-600:   var(--ink-2);
  --color-700:   var(--ink-1);

  --page-bg:     var(--surface-0);
  --surface:     var(--surface-1);
  --border:      var(--line-1);
  --border-color: var(--line-1);
  --border-color-strong: var(--line-2);
  --muted:       var(--ink-2);
  --body-text:   var(--ink-1);
  --white:       var(--surface-1);
}