/* tokens.css — LoanCalc design tokens */

:root {
  /* ── Colors ───────────────────────────────────────── */
  --color-navy:           #0A1628;   /* Midnight Ink  — dark surfaces, authority */
  --color-navy-mid:       #162040;   /* Deep Atlas    — settings drawer, footer */
  --color-focus:          #1B3FA3;   /* Focus Blue    — focus rings, currency result border */
  --color-gold:           #C8973A;   /* Data Gold     — financial metrics, active tab, CTA */
  --color-gold-wash:      #FDF4E3;   /* Gold Wash     — helper note background */
  --color-gold-deep:      #96700A;   /* Gold Deep     — helper note text */
  --color-loss:           #C0392B;   /* Loss Red      — negative values */
  --color-bg:             #F0F4FF;   /* Blueprint     — page background */
  --color-surface:        #FFFFFF;   /* Surface       — card backgrounds */
  --color-surface-raised: #F8FAFF;   /* Surface Raised — hover states, secondary cards */
  --color-text:           #0A1628;   /* Primary text  — same hue as navy */
  --color-muted:          #5B6278;   /* Slate Mist    — labels, secondary text */
  --color-border:         #D5DCF0;   /* Grid Line     — borders, dividers */
  --color-gain:           #0B7C4E;   /* Gain Green    — positive financial values */
  --color-gain-wash:      #E9F7F0;   /* Gain Wash     — gain callout tint */
  --color-blue-light:     #EEF2FF;   /* Blue Light    — currency result background */
  --color-oil-bg:         #EAF3DE;   /* Oil card icon background */
  --color-oil-border:     #639922;   /* Oil card icon border */
  --color-focus-ring:     rgba(27,63,163,0.15); /* Focus outline glow */
  --color-hero-glow:      rgba(27,63,163,0.18); /* Focus Blue at 18% — hero radial gradient */
  --color-white:          oklch(99% 0.006 252); /* Tinted white — never pure #fff */

  /* ── Slider fill ──────────────────────────────────────── */
  --slider-fill:  var(--color-navy);   /* filled track segment */
  --slider-track: var(--color-border); /* unfilled track segment */

  /* ── Verdict colors ───────────────────────────────────── */
  --verdict-neutral-bg:  rgba(255,255,255,0.08);
  --verdict-neutral-fg:  rgba(255,255,255,0.75);
  --verdict-negative-bg: rgba(194,57,48,0.15);
  --verdict-negative-fg: #F4A7A3;
  --verdict-warn-bg:     rgba(200,151,58,0.15);
  --verdict-warn-fg:     #F5C475;
  --verdict-positive-bg: rgba(11,124,78,0.2);
  --verdict-positive-fg: #7DE0B8;

  /* ── Radius ───────────────────────────────────────── */
  --r-xs:   6px;   /* close buttons, pref-tag, retry btn */
  --r-sm:   8px;   /* buttons, inputs, controls */
  --r-md:  10px;   /* res-box, faq items, rate row, verdict */
  --r-lg:  12px;   /* formula box, settings drawer area */
  --r-xl:  20px;   /* chart/table containers */
  --r-2xl: 28px;   /* primary calculator card */

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-ambient:  0 2px 16px rgba(10,22,40,0.08);  /* card rest state */
  --shadow-elevated: 0 4px 32px rgba(10,22,40,0.12);  /* primary calc card, chart */

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

}