/* DeepStack platform tokens (Frente 1 of the pivot, 22 October 2026; the owner's decision D-P4 of
   21 October 2026: dark by default, the paper of the journal in light mode and in the Buildout reader).
   Three families from the site's own files (public/fonts, latin subsets, OFL): Newsreader for the
   questions and the titles, Inter Tight for the interface, JetBrains Mono for every number.
   One ruler from 0 to 100 everywhere: the Call in amber, the machines in blue, the readers in green,
   the reader as a circle. The colors below are the only ones the app uses. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/newsreader.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(/fonts/newsreader-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-tight.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono.woff2) format('woff2'); }

:root {
  /* the palette, named by what it is */
  --navy: #0E1A2B;
  --navy-2: #17263D;
  --navy-3: #1F3150;
  --paper: #F4EFE6;
  --paper-2: #EBE3D5;
  --paper-3: #E2D8C6;
  --amber: #E3A33B;
  --amber-ink: #8F5B0C;
  --blue: #3F5F8A;
  --blue-bright: #8FB0DA;
  --green: #2F6B4F;
  --green-bright: #6FBF94;
  --brick: #B5482F;
  --brick-bright: #E07A62;

  /* the roles, dark by default */
  --bg: var(--navy);
  --bg-2: var(--navy-2);
  --surface: #13213A;
  --surface-2: var(--navy-3);
  --ink: var(--paper);
  --ink-2: #D9D3C7;
  --muted: #A9B1BE;
  --rule: rgba(244, 239, 230, 0.14);
  --rule-strong: rgba(244, 239, 230, 0.32);
  --call: var(--amber);
  --call-text: var(--amber);
  --machines: var(--blue-bright);
  --machines-text: var(--blue-bright);
  --readers: var(--green-bright);
  --readers-text: var(--green-bright);
  --me: var(--paper);
  --me-stroke: var(--navy);
  --yes: var(--green-bright);
  --no: var(--brick-bright);
  --focus: var(--amber);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --pad: 16px;
  --tab-h: 60px;
  --col: 640px;      /* the app's reading column */
  --reader-col: 680px; /* the Buildout reader's column (the journal's, kept here alone) */
  --speed: 320ms;
  color-scheme: dark;
}

/* Light mode: the paper of the journal. Chosen in Me; the app never follows the system by default
   (D-P4), so the switch is an attribute on <html>, kept in the browser. */
:root[data-theme="light"] {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: #FAF7F1;
  --surface-2: var(--paper-2);
  --ink: var(--navy);
  --ink-2: #263244;
  --muted: #5C6370;
  --rule: #D3C9B8;
  --rule-strong: #B9AD98;
  --call: var(--amber);
  --call-text: var(--amber-ink);
  --machines: var(--blue);
  --machines-text: var(--blue);
  --readers: var(--green);
  --readers-text: var(--green);
  --me: var(--navy);
  --me-stroke: var(--paper);
  --yes: var(--green);
  --no: var(--brick);
  --shadow: 0 10px 30px rgba(14, 26, 43, 0.12);
  color-scheme: light;
}

/* The Buildout reader is paper whatever the theme: the journal keeps its face there. */
.app-reader {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: #FAF7F1;
  --surface-2: var(--paper-2);
  --ink: var(--navy);
  --ink-2: #263244;
  --muted: #5C6370;
  --rule: #D3C9B8;
  --rule-strong: #B9AD98;
  --call-text: var(--amber-ink);
  --machines: var(--blue);
  --machines-text: var(--blue);
  --readers: var(--green);
  --readers-text: var(--green);
  --me: var(--navy);
  --me-stroke: var(--paper);
  --yes: var(--green);
  --no: var(--brick);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0ms; }
}
