/* Design tokens — every component colour comes from here. Light is the base; dark applies via
   data-theme="dark" or (when theme is "auto") the OS preference. */
:root {
  color-scheme: light;

  /* surfaces + ink */
  --bg: #F4F6F8;
  --paper: var(--bg);
  --sheet: #FFFFFF;
  --bg-3: #EAEEF5;
  --border: #D9DEE6;
  --ink: #101828;
  --ink-2: #475467;
  --gutter: #5A6477;

  /* accents */
  --mark: #FFD43B;
  --mark-ink: #1A1400;
  --cobalt: #2C4BD6;
  --green: #067647;
  --red: #B42318;
  --purple: #6941C6;

  /* diff + status */
  --del-bg: #FDECEC; --del-fg: #B42318;
  --add-bg: #E7F6EC; --add-fg: #067647;
  --warn-fg: #B54708;

  /* code panes (dark in both themes) */
  --code-bg: #0F1729; --code-fg: #E4E8F1; --code-dim: #7C88A3; --code-str: #9FD7A8; --code-kw: #9DB4FF;

  --glass: color-mix(in srgb, var(--sheet) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--border) 80%, transparent);
  --shadow: 0 1px 0 rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.18);
  --shadow-lg: 0 1px 0 rgba(16,24,40,.04), 0 28px 60px -20px rgba(16,24,40,.32);
  --grid-dot: color-mix(in srgb, var(--cobalt) 16%, transparent);

  /* fonts */
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* type scale */
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px;
  --h4: clamp(17px, 1.8vw, 20px);
  --h3: clamp(20px, 2.4vw, 24px);
  --h2: clamp(28px, 3.6vw, 44px);
  --h1: clamp(42px, 6vw, 80px);
  --display: clamp(52px, 7.5vw, 96px);

  /* radii + layout */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --measure: 66ch;
  --sec-pad: clamp(56px, 8vw, 104px);
  --nav-h: 64px;
}

@media (max-width: 860px) { :root { --nav-h: 56px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1120; --sheet: #111A2E; --bg-3: #1C2845; --border: #24304A;
    --ink: #E7EBF3; --ink-2: #A3AEC2; --gutter: #8E9AB5;
    --cobalt: #6DA8FF; --green: #3DD68C; --red: #F97066; --purple: #A78BFA;
    --del-bg: #3A1418; --del-fg: #FF8F87; --add-bg: #0E3020; --add-fg: #6EE3A1; --warn-fg: #FDB022;
    --code-bg: #070C18; --code-dim: #6E7A96;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.6);
    --shadow-lg: 0 1px 0 rgba(0,0,0,.3), 0 32px 70px -20px rgba(0,0,0,.75);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1120; --sheet: #111A2E; --bg-3: #1C2845; --border: #24304A;
  --ink: #E7EBF3; --ink-2: #A3AEC2; --gutter: #8E9AB5;
  --cobalt: #6DA8FF; --green: #3DD68C; --red: #F97066; --purple: #A78BFA;
  --del-bg: #3A1418; --del-fg: #FF8F87; --add-bg: #0E3020; --add-fg: #6EE3A1; --warn-fg: #FDB022;
  --code-bg: #070C18; --code-dim: #6E7A96;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.3), 0 32px 70px -20px rgba(0,0,0,.75);
}