/* =====================================================================
   tokens.css: fonts and design tokens (colour, type, space, motion).
   Theme mechanics:
     :root                                           light values (default)
     @media dark + :root:not([data-theme="light"])   dark values (follows OS)
     :root[data-theme="dark"]                        dark values, forced by toggle
   ===================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* ---------- Colour: light ("warm paper and ink") ---------- */
  --paper: #FAF8F4;
  --paper-2: #F2EEE6;
  --surface: #FFFFFF;
  --mat: #FFFFFF;
  --ink: #1A1814;
  --ink-2: #4A443B;
  --ink-3: #6B6458;
  --rule: #E3DDD2;
  --rule-strong: #C9C0B0;
  --control-border: #8C8374;
  --accent: #B23A17;
  --accent-strong: #8E2C10;
  --accent-wash: #F7E7DE;
  --on-accent: #FFFFFF;
  --code-bg: #F2EEE6;
  --header-bg: rgb(250 248 244 / .86);
  --scrim: rgb(26 24 20 / .72);
  --on-scrim: #FFFFFF;
  --backdrop: rgb(18 17 16 / .86);
  --on-backdrop: #F2EEE6;
  --photo-filter: none;

  /* Data and schematic colours */
  --data-focus: #B23A17;
  --data-memory: #2A5EA8;
  --data-noise: #8A6A12;
  --data-context: #6B6458;
  --badge-schematic: #8A6A12;
  --badge-paper: #2A5EA8;
  --badge-real: #2F6B3A;

  /* Shadows */
  --shadow-plate: 0 1px 1px rgb(26 24 20 / .04), 0 12px 32px -20px rgb(26 24 20 / .28);
  --shadow-plate-hover: 0 2px 2px rgb(26 24 20 / .05), 0 18px 36px -18px rgb(26 24 20 / .34);
  --shadow-pop: 0 2px 6px rgb(26 24 20 / .08), 0 18px 40px -12px rgb(26 24 20 / .24);
  --plate-border: var(--rule);

  /* ---------- Fonts ---------- */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (root 16px) ---------- */
  --fs-display: clamp(2.75rem, 1.8rem + 4.5vw, 5.25rem);
  --fs-h1: clamp(2.35rem, 1.7rem + 3vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem);
  --fs-h3: clamp(1.4rem, 1.25rem + .75vw, 1.9rem);
  --fs-lede: clamp(1.0625rem, 1.02rem + .25vw, 1.2rem);
  --fs-deck-xl: clamp(1.2rem, 1.05rem + .8vw, 1.55rem);
  --fs-title: 1.0625rem;
  --fs-body: clamp(.98rem, .95rem + .12vw, 1.05rem);
  --fs-cap: .9375rem;
  --fs-ui: .875rem;
  --fs-sm: .8125rem;
  --fs-xs: .75rem;
  --track-kicker: .08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* ---------- Layout ---------- */
  --container: 75rem;
  --measure: 42rem;
  --wide: 66rem;
  --gutter: 16px;
  --col-gap: 16px;
  --header-h: 56px;
  --mat-pad: 12px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-draw: 1400ms;
  --ease-out: cubic-bezier(.22, .8, .26, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* ---------- z-index ---------- */
  --z-header: 50;
  --z-pop: 60;
  --z-toast: 70;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 840px) { :root { --col-gap: 24px; --header-h: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ---------- Colour: dark ("a dark reading-room table with light plates on it") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110; --paper-2: #1A1816; --surface: #1F1D1A; --mat: #E8E3D9;
    --ink: #EEE9E0; --ink-2: #C2BAAD; --ink-3: #9A9184;
    --rule: #2F2B26; --rule-strong: #4A443C; --control-border: #6E665B;
    --accent: #F0875A; --accent-strong: #F6A884; --accent-wash: #3A2117; --on-accent: #121110;
    --code-bg: #1A1816; --header-bg: rgb(18 17 16 / .82); --scrim: rgb(18 17 16 / .78);
    --data-focus: #D56A3B; --data-memory: #5B8CD6; --data-noise: #AE8820; --data-context: #9A9184;
    --badge-schematic: #D9B45A; --badge-paper: #8EB1DA; --badge-real: #8CC79A;
    --shadow-plate: 0 18px 40px -22px rgb(0 0 0 / .9);
    --shadow-plate-hover: 0 22px 44px -20px rgb(0 0 0 / .95);
    --shadow-pop: 0 0 0 1px #2F2B26, 0 20px 48px -12px rgb(0 0 0 / .75);
    --plate-border: transparent;
    --photo-filter: brightness(.92);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121110; --paper-2: #1A1816; --surface: #1F1D1A; --mat: #E8E3D9;
  --ink: #EEE9E0; --ink-2: #C2BAAD; --ink-3: #9A9184;
  --rule: #2F2B26; --rule-strong: #4A443C; --control-border: #6E665B;
  --accent: #F0875A; --accent-strong: #F6A884; --accent-wash: #3A2117; --on-accent: #121110;
  --code-bg: #1A1816; --header-bg: rgb(18 17 16 / .82); --scrim: rgb(18 17 16 / .78);
  --data-focus: #D56A3B; --data-memory: #5B8CD6; --data-noise: #AE8820; --data-context: #9A9184;
  --badge-schematic: #D9B45A; --badge-paper: #8EB1DA; --badge-real: #8CC79A;
  --shadow-plate: 0 18px 40px -22px rgb(0 0 0 / .9);
  --shadow-plate-hover: 0 22px 44px -20px rgb(0 0 0 / .95);
  --shadow-pop: 0 0 0 1px #2F2B26, 0 20px 48px -12px rgb(0 0 0 / .75);
  --plate-border: transparent;
  --photo-filter: brightness(.92);
}
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-contrast: more) {
  :root, :root:not([data-theme="light"]), :root[data-theme] { --rule: var(--rule-strong); --header-bg: var(--paper); }
}

@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme] {
    color-scheme: light;
    --paper: #FFFFFF; --paper-2: #FFFFFF; --surface: #FFFFFF; --mat: #FFFFFF;
    --ink: #000000; --ink-2: #333333; --ink-3: #555555;
    --rule: #CCCCCC; --rule-strong: #999999; --control-border: #777777;
    --accent: #8E2C10; --accent-strong: #8E2C10; --accent-wash: #FFFFFF; --on-accent: #FFFFFF;
    --code-bg: #FFFFFF; --header-bg: #FFFFFF;
    --data-focus: #B23A17; --data-memory: #2A5EA8; --data-noise: #8A6A12; --data-context: #555555;
    --badge-schematic: #8A6A12; --badge-paper: #2A5EA8; --badge-real: #2F6B3A;
    --shadow-plate: none; --shadow-plate-hover: none; --shadow-pop: none;
    --plate-border: #CCCCCC; --photo-filter: none;
  }
}