/* ==========================================================================
   Design tokens — "Digital museum of computing history"
   Default: GALLERY NIGHT — warm ink-black rooms, archival ivory type, copper and gold light.
   Opt-in:  READING ROOM — parchment, ink and copper ([data-theme="light"]).
   ========================================================================== */
:root {
  color-scheme: dark;
  /* Palette (gallery night) */
  --c-bg: #0d0c0a;
  --c-bg-deep: #070605;
  --c-surface: #15130f;
  --c-surface-2: #1d1a15;
  --c-surface-3: #27231c;
  --c-ink: #efe6d2;
  --c-ink-soft: #cfc3aa;
  --c-muted: #a0957e;
  --c-line: #383126;
  --c-line-soft: #27231c;
  --c-accent: #dc9a5e;          /* copper light — 7.9:1 on --c-bg */
  --c-accent-strong: #f0b77f;
  --c-accent-ink: #1a1206;
  --c-teal: #7fbfb3;
  --c-teal-soft: #142c29;
  --c-gold: #d8b66e;
  --c-gold-soft: #2c2417;
  --c-danger: #e8836f;
  --c-success: #8fca9c;
  --c-warn: #e9bf66;
  --c-midnight: #090807;
  --c-midnight-2: #13110d;
  --c-on-midnight: #efe5cf;
  --c-on-midnight-soft: #b5ab93;

  /* Lighting */
  --light-warm: rgba(222, 170, 98, .16);
  --light-cool: rgba(110, 160, 170, .07);
  --hairline-gold: linear-gradient(90deg, transparent, rgba(216, 182, 110, .55) 20%, rgba(216, 182, 110, .55) 80%, transparent);
  --vitrine: linear-gradient(180deg, rgba(255, 240, 210, .045), rgba(255, 240, 210, 0) 42%);
  --grain-opacity: .05;

  /* Diagram palette (inlined SVG diagrams use these) */
  --dg-bg: #14120e;
  --dg-panel: #1c1914;
  --dg-ink: #ede3cd;
  --dg-muted: #a89d86;
  --dg-line: #4d4535;
  --dg-accent: #e09f62;
  --dg-teal: #7fbfb3;
  --dg-gold: #d8b66e;
  --dg-red: #e8836f;
  --dg-blue: #8bb0d8;
  --dg-soft: #2a251d;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);
  --fs-hero: clamp(2.8rem, 1.2rem + 6.4vw, 7rem);
  --lh-prose: 1.74;

  /* Space, shape, depth */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem;
  --radius: 4px; --radius-sm: 3px; --radius-lg: 8px;
  --shadow-1: 0 1px 0 rgba(255, 240, 210, .04) inset, 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .28);
  --shadow-2: 0 1px 0 rgba(255, 240, 210, .06) inset, 0 14px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px rgba(216, 182, 110, .85);
  --focus-color: #f2c98c;
  --maxw: 1280px; --maxw-prose: 72ch;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #f3ead9; --c-bg-deep: #e9dcc3; --c-surface: #fbf6ec; --c-surface-2: #f1e6d1; --c-surface-3: #e8dabf;
  --c-ink: #1a2232; --c-ink-soft: #364057; --c-muted: #685f4f; --c-line: #d6c4a3; --c-line-soft: #e5d8bf;
  --c-accent: #9c5a26; --c-accent-strong: #7f4519; --c-accent-ink: #fffaf0;
  --c-teal: #22665f; --c-teal-soft: #d7e7e2; --c-gold: #8a6619; --c-gold-soft: #f0e2bb;
  --c-danger: #973a2f; --c-success: #2f6d42; --c-warn: #8a5d10;
  --c-midnight: #0e1729; --c-midnight-2: #16233d; --c-on-midnight: #efe5cf; --c-on-midnight-soft: #b9b09b;
  --light-warm: rgba(176, 130, 70, .12); --light-cool: rgba(34, 102, 95, .06);
  --hairline-gold: linear-gradient(90deg, transparent, rgba(154, 116, 37, .5) 20%, rgba(154, 116, 37, .5) 80%, transparent);
  --vitrine: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%);
  --grain-opacity: .035;
  --dg-bg: #f8f1e3; --dg-panel: #fffaf0; --dg-ink: #1b2333; --dg-muted: #675e4d; --dg-line: #c9b79a;
  --dg-accent: #b0682f; --dg-teal: #2b746d; --dg-gold: #b98f36; --dg-red: #a8433a; --dg-blue: #2f5f8a; --dg-soft: #ebe1cf;
  --shadow-1: 0 1px 2px rgba(40, 28, 10, .08), 0 2px 8px rgba(40, 28, 10, .06);
  --shadow-2: 0 6px 24px rgba(40, 28, 10, .12), 0 2px 6px rgba(40, 28, 10, .08);
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px rgba(34, 102, 95, .7);
  --focus-color: #1d5c55;
}