/* MarketChronos — design tokens (variables.css)
 *
 * Two-layer color system: primitives -> semantics.
 * Mocks must use ONLY the semantic tokens, never the primitives.
 *
 * --- WCAG AA contrast ratios (text >= 4.5:1 normal text) ---
 * Background base is #0f1117 (NOT pure black). surface-1 is #181b23.
 *
 * --color-text (#e6e9ef) on --bg-base   (#0f1117): ~15.5:1  (AA / AAA pass)
 * --color-text (#e6e9ef) on --surface-1 (#181b23): ~14.2:1  (AA / AAA pass)
 * --color-text-muted (#9aa3b2) on --bg-base   (#0f1117): ~7.4:1  (AA pass)
 * --color-text-muted (#9aa3b2) on --surface-1 (#181b23): ~6.8:1  (AA pass)
 *
 * Muted text on the darker surfaces (used by hover rows / nested panels):
 * --color-text-muted (#9aa3b2) on --surface-2 (#20242e): ~6.3:1  (AA pass)
 * --color-text-muted (#9aa3b2) on --surface-3 (#282d39): ~5.6:1  (AA pass)
 * All of the above exceed the 4.5:1 threshold for normal-size text.
 * NOTE: muted on surface-3 still clears AA, but it is the tightest pair; for
 * dense or small text on a --surface-3 background prefer --color-text (not
 * --color-text-muted) to keep comfortable headroom.
 */

:root {
  /* ---------- Color primitives (do not use directly in mocks) ---------- */
  --green-electric: #34d399; /* soft, informative gain — not alarm */
  --green-electric-dim: rgba(52, 211, 153, 0.16);
  --red-soft: #f87171;       /* soft, informative loss — not alarm */
  --red-soft-dim: rgba(248, 113, 113, 0.16);
  --blue-accent: #3b82f6;    /* brand / action — distinct from gain green */
  --blue-accent-bright: #60a5fa;
  --blue-accent-dim: rgba(59, 130, 246, 0.18);

  --amber-warning: #fbbf24;  /* calm caution — attention, not alarm (vs red) */
  --amber-warning-dim: rgba(251, 191, 36, 0.16);

  --ink-100: #e6e9ef;
  --ink-300: #9aa3b2;
  --ink-500: #6b7280;

  --slate-900: #0f1117; /* base background, intentionally not pure black */
  --slate-850: #181b23; /* surface 1 (~+3.5% lighter) */
  --slate-800: #20242e; /* surface 2 (~+3.5% lighter) */
  --slate-750: #282d39; /* surface 3 (~+3.5% lighter) */

  /* ---------- Color semantics (USE THESE) ---------- */
  --color-positive: var(--green-electric);
  --color-positive-bg: var(--green-electric-dim);
  --color-negative: var(--red-soft);
  --color-negative-bg: var(--red-soft-dim);
  --color-accent: var(--blue-accent);
  --color-accent-bright: var(--blue-accent-bright);
  --color-accent-bg: var(--blue-accent-dim);
  /* Caution cue (e.g. allocation targets not summing 100%) — amber, not red. */
  --color-warning: var(--amber-warning);
  --color-warning-bg: var(--amber-warning-dim);
  /* Text/glyph color placed on top of accent backgrounds (--color-accent). */
  --color-on-accent: #ffffff;

  --color-text: var(--ink-100);
  --color-text-muted: var(--ink-300);
  --color-text-faint: var(--ink-500);

  --bg-base: var(--slate-900);
  --surface-1: var(--slate-850);
  --surface-2: var(--slate-800);
  --surface-3: var(--slate-750);

  /* ---------- Typography (6 roles, rem on a 16px root) ---------- */
  --font-size-display: 2.5rem;   /* 40px */
  --font-size-title: 1.75rem;    /* 28px */
  --font-size-subtitle: 1.25rem; /* 20px */
  --font-size-value: 1.5rem;     /* 24px */
  --font-size-label: 0.875rem;   /* 14px */
  --font-size-caption: 0.75rem;  /* 12px */

  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  /* Tabular figures token (apply via font-variant-numeric) */
  --numeric-tabular: tabular-nums;

  /* ---------- Spacing (4/8/16/24/32/48/64) ---------- */
  --space-3xs: 0.125rem; /* 2px — hairline gaps only (e.g. stacked nav glyph/label) */
  --space-0: 0.25rem; /* 4px */
  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 3rem;    /* 48px */
  --space-6: 4rem;    /* 64px */
  --space-7: 6rem;    /* 96px (extra step for generous layouts) */

  /* ---------- Radii ---------- */
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm: 8px;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.35),
    0 0 24px rgba(59, 130, 246, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-enter: 600ms;

  /* ---------- Focus ---------- */
  --focus-ring: var(--blue-accent-bright);
}