/* ─────────────────────────────────────────────────────────────────────────────
   css/tokens.css — BIT's token set. Loaded first; every other sheet reads it.

     :root                    scales, type, layout (theme-independent)
     :root, [data-bit=dark]   dark palette (the fallback when the boot cannot run)
     [data-bit=light]         light palette

   Every surface in BIT is chrome (plain UI on the ground), so components read
   --bg-*, --ink*, --line* and --accent-ink directly; there is no paper surface.
   A colour declared outside the two theme blocks is a claim that it is right in
   both themes. See .claude/rules/theming.md.

   z-index ladder (every rule that joins it cites a rung):
     view content       < 20
     global header        30
     toasts               45
     modal backdrop       90
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --col-max: 960px;
  --gutter: 16px;
  --header-height: 60px;
  scroll-padding-top: calc(var(--header-height) + 8px);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  --ease: cubic-bezier(.32, .72, 0, 1);

  --z-header: 30;
  --z-toast: 45;
  --z-modal: 90;
}

/* ── Dark ──────────────────────────────────────────────────────────────────── */
:root,
:root[data-bit="dark"] {
  color-scheme: dark;

  --bg-0: #14131A;
  --bg-1: #1D1B26;
  --bg-2: #272433;

  --ink:       #EDEBF2;
  --ink-muted: #A29DB3;   /* 7.0:1 on --bg-1 */
  --ink-faint: #827D93;   /* 4.6:1 on --bg-1 */

  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --accent:       #8C83FF;
  --accent-hover: #A49CFF;
  --accent-quiet: rgba(140, 131, 255, 0.16);
  --accent-ink:   #ABA4FF;   /* 7.4:1 on --bg-1 */
  --accent-fill:  #6C63FF;   /* white on it: 4.6:1 */
  --on-accent:    #FFFFFF;

  --ok:   #4FB46B;   /* 6.3:1 on --bg-1 */
  --warn: #D19A2E;   /* 7.0:1 on --bg-1 */
  --rust: #E46B5B;   /* 5.0:1 on --bg-1 */
  --rust-fill: #C2473A;   /* a destructive button; white on it: 5.0:1 */
  --ok-quiet:   rgba(79, 180, 107, 0.14);
  --warn-quiet: rgba(209, 154, 46, 0.14);
  --rust-quiet: rgba(228, 107, 91, 0.14);

  --card-border: transparent;
  --card-emboss: rgba(255, 255, 255, 0.06);
  --well:        var(--bg-0);

  --shadow-c: rgba(6, 4, 14, 0.62);
  --sh-1: 0 1px 2px var(--shadow-c);
  --sh-2: 0 2px 10px -2px var(--shadow-c);
  --sh-3: 0 10px 26px -12px var(--shadow-c), 0 2px 6px -2px var(--shadow-c);
  --backdrop: rgba(8, 6, 16, 0.6);
}

/* ── Light ─────────────────────────────────────────────────────────────────── */
:root[data-bit="light"] {
  color-scheme: light;

  --bg-0: #F4F3F8;
  --bg-1: #FFFFFF;
  --bg-2: #ECEAF3;

  --ink:       #1E1B26;
  --ink-muted: #5C5670;   /* 7.0:1 on white */
  --ink-faint: #767089;   /* 4.8:1 on white */

  --line:        rgba(30, 27, 38, 0.11);
  --line-strong: rgba(30, 27, 38, 0.22);

  --accent:       #5A52E0;
  --accent-hover: #4B43CC;
  --accent-quiet: rgba(90, 82, 224, 0.11);
  --accent-ink:   #443CBE;   /* 8.0:1 on white */
  --accent-fill:  #5A52E0;   /* white on it: 5.6:1 */
  --on-accent:    #FFFFFF;

  --ok:   #1F7A3C;   /* 5.6:1 on white */
  --warn: #8A5C0C;   /* 5.5:1 on white */
  --rust: #B23A2C;   /* 6.0:1 on white */
  --rust-fill: #B23A2C;   /* white on it: 6.0:1 */
  --ok-quiet:   rgba(31, 122, 60, 0.10);
  --warn-quiet: rgba(138, 92, 12, 0.10);
  --rust-quiet: rgba(178, 58, 44, 0.09);

  --card-border: rgba(30, 27, 38, 0.12);
  --card-emboss: rgba(255, 255, 255, 0.65);
  --well:        var(--bg-0);

  --shadow-c: rgba(60, 52, 110, 0.16);
  --sh-1: 0 1px 2px var(--shadow-c);
  --sh-2: 0 2px 10px -2px var(--shadow-c);
  --sh-3: 0 10px 26px -12px var(--shadow-c), 0 2px 6px -2px var(--shadow-c);
  --backdrop: rgba(30, 26, 52, 0.38);
}