/* OptionsKing design tokens — a refined money-green / charcoal system.
   All color, type, space, radius, elevation, and motion are variables here; NO
   component hardcodes a raw value. Light / dark / system, OS Dynamic-Type aware
   (rem units + clamp), Material-3-adjacent with a premium fintech feel. */

:root {
  /* ---- Brand ramp (money green) ---- */
  --green-50: #e9f7ef;
  --green-100: #cdeeda;
  --green-200: #9fdcbb;
  --green-300: #63c496;
  --green-400: #2ea877;
  --green-500: #129463;
  --green-600: #0c7a51;
  --green-700: #0a6142;
  --green-800: #084c34;
  --green-900: #063826;
  --gold-400: #e9b949;
  --gold-500: #d29e2a;

  /* ---- Neutral / charcoal ramp ---- */
  --ink-0: #ffffff;
  --ink-25: #f6f9f7;
  --ink-50: #eef3f0;
  --ink-100: #e2e9e5;
  --ink-200: #cbd6cf;
  --ink-300: #a7b6ad;
  --ink-400: #7c8c83;
  --ink-500: #566158;
  --ink-700: #2c342e;
  --ink-800: #1d231f;
  --ink-900: #12160f;

  --red-400: #e06a5a;
  --red-500: #cf4436;

  /* ---- Semantic (LIGHT) ---- */
  --bg: var(--ink-25);
  --bg-grad-top: #eef6f0;
  --bg-grad-bottom: #f6f9f7;
  --surface: var(--ink-0);
  --surface-2: var(--ink-50);
  --surface-raised: var(--ink-0);
  --on-bg: var(--ink-900);
  --on-surface: var(--ink-800);
  --muted: var(--ink-500);
  --faint: var(--ink-400);
  --primary: var(--green-600);
  --primary-strong: var(--green-700);
  --on-primary: #ffffff;
  --primary-container: var(--green-50);
  --on-primary-container: var(--green-800);
  --accent: var(--gold-500);
  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --positive: var(--green-600);
  --warning: var(--gold-500);
  --danger: var(--red-500);
  --skeleton: var(--ink-100);
  --skeleton-shine: #ffffff;
  --scrim: rgba(18, 22, 15, 0.44);

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-num: 'Inter', ui-rounded, -apple-system, system-ui, sans-serif;
  --fs-display: clamp(1.9rem, 6vw, 2.4rem);
  --fs-h1: clamp(1.5rem, 5vw, 1.9rem);
  --fs-h2: clamp(1.15rem, 4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fw-regular: 400;
  --fw-medium: 550;
  --fw-bold: 700;
  --fw-black: 820;
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* ---- Space (4px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shared padding + gap for all small rounded pill/chip/badge tags so they read
     with one consistent rhythm (conf-chip, rank-tag, badge, resolve-chip,
     confidence-pill). Non-interactive tags only — tappable chips keep --tap. */
  --pill-pad: 4px 10px;
  --pill-gap: 5px;

  /* ---- Elevation ---- */
  --e-1: 0 1px 2px rgba(12, 22, 16, 0.06), 0 1px 3px rgba(12, 22, 16, 0.05);
  --e-2: 0 2px 6px rgba(12, 22, 16, 0.08), 0 6px 16px rgba(12, 22, 16, 0.07);
  --e-3: 0 8px 24px rgba(12, 22, 16, 0.14), 0 2px 6px rgba(12, 22, 16, 0.08);
  --ring: 0 0 0 3px rgba(18, 148, 99, 0.28);

  /* ---- Motion ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --tap: 48px;
  /* Content column. --maxw is the phone width the whole UI was designed at and stays
     the default; the two wider values are opted into by the tablet/desktop tiers at
     the bottom of app.css. The desktop cap is the widest measure these
     reading/decision screens stay comfortable at — don't push it further. */
  --maxw: 560px;
  --maxw-md: 720px;
  --maxw-lg: 1056px;
  /* Desktop left nav rail. Doubles as the body gutter on BOTH sides at that tier, so
     the rail sits beside the column instead of over it and the column still lands on
     the window's centre line. That makes the rail width a direct tax on the column:
     it is sized to its widest label ("Settings") plus icon and padding, not padded
     out, so the column can reach its full --maxw-lg on a laptop screen. */
  --rail: 176px;
}

:root[data-theme='dark'] {
  --bg: var(--ink-900);
  --bg-grad-top: #10160f;
  --bg-grad-bottom: #0b0f0a;
  --surface: #171d18;
  --surface-2: #1e251f;
  --surface-raised: #1b221c;
  --on-bg: #eaf1ec;
  --on-surface: #dbe5de;
  --muted: #9db0a4;
  --faint: #74857a;
  --primary: var(--green-400);
  --primary-strong: var(--green-300);
  --on-primary: #04160d;
  --primary-container: #12352492;
  --on-primary-container: var(--green-100);
  --accent: var(--gold-400);
  --border: #2a332c;
  --border-strong: #38443b;
  --positive: var(--green-300);
  --warning: var(--gold-400);
  --danger: var(--red-400);
  --skeleton: #232b25;
  --skeleton-shine: #2d372f;
  --scrim: rgba(0, 0, 0, 0.6);
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --e-3: 0 10px 30px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(46, 168, 119, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='system'], :root:not([data-theme]) {
    --bg: var(--ink-900);
    --bg-grad-top: #10160f;
    --bg-grad-bottom: #0b0f0a;
    --surface: #171d18;
    --surface-2: #1e251f;
    --surface-raised: #1b221c;
    --on-bg: #eaf1ec;
    --on-surface: #dbe5de;
    --muted: #9db0a4;
    --faint: #74857a;
    --primary: var(--green-400);
    --primary-strong: var(--green-300);
    --on-primary: #04160d;
    --primary-container: #12352492;
    --on-primary-container: var(--green-100);
    --accent: var(--gold-400);
    --border: #2a332c;
    --border-strong: #38443b;
    --positive: var(--green-300);
    --warning: var(--gold-400);
    --danger: var(--red-400);
    --skeleton: #232b25;
    --skeleton-shine: #2d372f;
    --scrim: rgba(0, 0, 0, 0.6);
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --e-3: 0 10px 30px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(46, 168, 119, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}