/* ════════════════════════════════════════════════════════════════
   The Art of Underwriting — Art of Underwriting
   tokens.css — design system primitives
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Ink / Midnight Purple (institutional foundation) ─── */
  --ink:           #0C0420;   /* near-black, deep purple base */
  --ink-1:         #170934;   /* primary section background */
  --ink-2:         #20104A;   /* card / modal background */
  --ink-3:         #2C1762;   /* elevated surface, hover */
  --ink-4:         #3D2080;   /* accent highlight */
  --ink-line:      rgba(244, 200, 66, 0.14);

  /* ─── Gold (premium signal) ─── */
  --gold:          #D4A017;
  --gold-bright:   #F4C842;
  --gold-glow:     #FFD56C;
  --gold-deep:     #A8800F;
  --gold-pale:     #F5EDD6;
  --gold-soft:     rgba(244, 200, 66, 0.08);
  --gold-line:     rgba(244, 200, 66, 0.24);

  /* ─── Money accents (track record + scarcity) ─── */
  --emerald:       #10704F;
  --emerald-deep:  #0A3D2E;
  --emerald-glow:  #2DD4A2;
  --burgundy:      #4A0E1F;
  --burgundy-deep: #2A0610;
  --burgundy-glow: #B91C3C;

  /* ─── Aurora gradient stops (shifted for purple bg) ─── */
  --aurora-1:      #0D6B8A;   /* teal accent (cool pop) */
  --aurora-2:      #6B22B0;   /* magenta-violet (lifts the purple bg) */
  --aurora-3:      #D97706;   /* warm amber */
  --aurora-4:      #C026D3;   /* hot magenta */

  /* ─── Neutral / paper ─── */
  --paper:         #F7F2E7;
  --paper-2:       #FCF8EE;
  --paper-3:       #FFFFFF;
  --gray-l:        #C4C7CD;
  --gray:          #6B7280;
  --gray-d:        #374151;

  /* ─── Type families ─── */
  --display:       'Instrument Serif', 'Times New Roman', Georgia, serif;
  --display-alt:   'Fraunces', 'Instrument Serif', Georgia, serif;
  --body:          'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --mono:          'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ─── Type scale ─── */
  --t-mono-xs:     11px;
  --t-mono:        13px;
  --t-body-sm:     14.5px;
  --t-body:        16px;
  --t-body-lg:     18px;
  --t-body-xl:     20px;
  --t-h6:          22px;
  --t-h5:          26px;
  --t-h4:          32px;
  --t-h3:          42px;
  --t-h2:          clamp(40px, 6vw, 76px);
  --t-h1:          clamp(56px, 9vw, 124px);
  --t-display:     clamp(64px, 11vw, 188px);

  /* ─── Spacing ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 120px;
  --s-11: 160px;

  /* ─── Radii ─── */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  100px;
  --r-round: 9999px;

  /* ─── Motion ─── */
  --ease-silk:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-drama:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-editor:   cubic-bezier(0.65, 0, 0.35, 1);

  --d-ui:     160ms;
  --d-fast:   240ms;
  --d-base:   400ms;
  --d-slow:   640ms;
  --d-hero:   900ms;
  --d-sheen: 1600ms;

  /* ─── Shadows / glow ─── */
  --sh-card:    0 8px 30px -12px rgba(0, 0, 0, 0.6);
  --sh-float:   0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --sh-deep:    0 40px 100px -40px rgba(0, 0, 0, 0.8);
  --sh-edit:    0 1px 0 rgba(244, 200, 66, 0.18) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  --sh-halo:    0 0 0 1px rgba(244, 200, 66, 0.25), 0 12px 32px -12px rgba(244, 200, 66, 0.32);
  --glow-gold:  0 0 60px rgba(244, 200, 66, 0.35);
  --glow-em:    0 0 60px rgba(45, 212, 162, 0.32);
  --glow-burg:  0 0 60px rgba(185, 28, 60, 0.34);

  /* ─── Glass ─── */
  --glass:        rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-line:   rgba(244, 200, 66, 0.18);
  --glass-blur:   blur(20px) saturate(180%);

  /* ─── Cursor tracking (set via JS) ─── */
  --cx: 50%;
  --cy: 50%;
  --scroll: 0;

  /* ─── Layout ─── */
  --container: 1320px;
  --gutter:    32px;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-ui: 0ms; --d-fast: 0ms; --d-base: 0ms;
    --d-slow: 0ms; --d-hero: 0ms; --d-sheen: 0ms;
  }
}

/* ─── Selection ─── */
::selection {
  background: var(--gold-bright);
  color: var(--ink);
}