/* 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;
  --maxw: 560px;
}

: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; }
}