/* ═══════════════════════════════════════════════════════════════════
   tokens.css — the ONLY file that declares raw values.
   Every other stylesheet consumes these custom properties; if you are
   about to type a hex code, a px radius or a font stack anywhere else,
   add a token here instead.
   Light is the default; dark is a palette-only override at the bottom.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── Palette ─────────────────────────────────────────────────── */
  --bg: #f8f9fb;
  --bg-sunken: #f1f2f6;
  --card: #ffffff;
  --card-raised: #ffffff;
  --border: #e8eaef;
  --border-light: #f0f0f5;
  --border-strong: #d6dae2;

  --text: #1a1d26;
  --text-secondary: #5f6570;
  --text-muted: #949aa6;
  --text-placeholder: #c4c8d0;
  --text-on-accent: #ffffff;

  --accent: #6366f1;
  --accent-hover: #5558e6;
  --accent-active: #3730a3;
  --accent-light: #eef0ff;
  --accent-soft: #f5f4ff;
  --accent-ring: rgba(99, 102, 241, 0.22);

  --green: #10b981;
  --green-hover: #059669;
  --green-light: #ecfdf5;
  --green-text: #047857;

  --red: #f43f5e;
  --red-light: #fff1f2;
  --red-border: #fecdd3;
  --red-text: #be123c;

  --amber: #f59e0b;
  --amber-light: #fffbeb;
  --amber-border: #fde68a;
  --amber-text: #b45309;

  --violet: #7c3aed;
  --violet-light: #f5f3ff;

  --scrim: rgba(15, 15, 20, 0.45);

  /* Diff surface (review.css) — semantic, not decorative */
  --diff-old-bg: #fdf6f7;
  --diff-old-border: #f6d9de;
  --diff-new-bg: #f2fcf7;
  --diff-new-border: #c9efdb;

  /* ── Type ────────────────────────────────────────────────────── */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-2xs: 0.6875rem;  /* 11 — meta, counters */
  --fs-xs: 0.75rem;     /* 12 — hints */
  --fs-sm: 0.8125rem;   /* 13 — secondary copy, labels */
  --fs-md: 0.875rem;    /* 14 — body */
  --fs-lg: 1rem;        /* 16 — inputs (never smaller: iOS zooms below 16) */
  --fs-xl: 1.1875rem;   /* 19 — step titles */
  --fs-2xl: 1.375rem;   /* 22 — view headings */
  --fs-3xl: 1.75rem;    /* 28 — hero */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.6;
  --tracking-tight: -0.01em;

  /* ── Spacing — 4px base ──────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 14px;
  --radius: var(--r-lg);   /* legacy alias — kept so old class names read the same */
  --r-xl: 20px;
  --r-pill: 100px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-panel: -8px 0 32px rgba(0, 0, 0, 0.12);
  --ring: 0 0 0 3px var(--accent-ring);

  /* ── Motion ──────────────────────────────────────────────────── */
  --transition: 180ms ease;
  --transition-slow: 250ms ease;

  /* ── Layout ──────────────────────────────────────────────────── */
  --shell-max: 760px;
  --shell-max-wide: 960px;
  --topbar-h: 57px;
  --tabs-h: 45px;
  --tap-min: 44px;          /* minimum touch target — one-handed phone use */
  --gutter: var(--sp-4);
  --gutter-lg: var(--sp-6);

  /* ── Stacking ────────────────────────────────────────────────── */
  --z-nav: 30;
  --z-tabs: 40;
  --z-topbar: 50;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-gate: 1200;
  --z-toast: 1300;
}

/* ── Dark: palette only. No sizing, no spacing, no motion here. ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --bg-sunken: #0a0b10;
    --card: #171a22;
    --card-raised: #1d2130;
    --border: #272b36;
    --border-light: #21242e;
    --border-strong: #363b49;

    --text: #eceef4;
    --text-secondary: #a8aec0;
    --text-muted: #7b8296;
    --text-placeholder: #5a6072;
    --text-on-accent: #ffffff;

    --accent: #818cf8;
    --accent-hover: #93a0ff;
    --accent-active: #a5b4fc;
    --accent-light: #1e2140;
    --accent-soft: #191c33;
    --accent-ring: rgba(129, 140, 248, 0.30);

    --green: #34d399;
    --green-hover: #6ee7b7;
    --green-light: #10261e;
    --green-text: #6ee7b7;

    --red: #fb7185;
    --red-light: #2a1319;
    --red-border: #4c1d26;
    --red-text: #fda4af;

    --amber: #fbbf24;
    --amber-light: #2a1f0b;
    --amber-border: #4a3611;
    --amber-text: #fcd34d;

    --violet: #a78bfa;
    --violet-light: #1e1930;

    --scrim: rgba(0, 0, 0, 0.65);

    --diff-old-bg: #241419;
    --diff-old-border: #45222b;
    --diff-new-bg: #0f2419;
    --diff-new-border: #1d4b34;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-panel: -8px 0 32px rgba(0, 0, 0, 0.60);
  }
}