/* ============================================================
   tokens.css — single source of truth for The Crossing

   PAPER PASS. The light appearance is warm off-white paper with
   charcoal ink; the dark one is the same charcoal page it always
   was, with the paper's own off-white for its primary text. Only
   the semantic block at the bottom of this file carries either,
   so the whole site follows from here and nothing downstream had
   to change to adopt it.

   The primitive ramps immediately below are the neutral pass this
   replaced. Nothing consumes them — every stylesheet reads the
   semantic tokens — so they are left as the record of the ramp
   rather than restated in the new hue.
   ============================================================ */

:root {
  /* ---- Paper (was sand) -------------------------------------
     Eased off pure white: at #ffffff the page glared on a bright
     screen, so the whole light end drops one step. The tonal
     order is untouched — surfaces still sit above the page, the
     ramp still spaces evenly — and muted ink holds AA (5.74:1).
     ----------------------------------------------------------- */
  --sand-050: #f6f6f6;
  --sand-100: #f2f2f2;
  --sand-200: #ececec;
  --sand-300: #e3e3e3;
  --sand-400: #d4d4d4;
  --sand-500: #bdbdbd;

  /* ---- Ink (text) ------------------------------------------- */
  --ink-900: #111111;    /* primary                              */
  --ink-700: #363636;    /* secondary                            */
  --ink-500: #5e5e5e;    /* muted — AA on every surface below    */

  /* ---- Accent (was ember/clay) ------------------------------ */
  /* In monochrome an accent is CONTRAST, not hue: near-black on
     light surfaces, near-white on dark ones. */
  --ember-500: #1a1a1a;
  --ember-400: #2e2e2e;
  --clay-600: #2b2b2b;
  --clay-500: #3d3d3d;
  --clay-700: #202020;
  --accent-light: #ededed;  /* the accent, for dark surfaces     */

  /* ---- Machine surfaces (bars, terminals) ------------------- */
  --machine-900: #141414;
  --machine-800: #1c1c1c;
  --machine-700: #262626;
  --machine-text: #d6d6d6;
  --machine-dim: #9a9a9a;

  /* ---- Dusk (the dark end of the day) ----------------------- */
  --violet-900: #171717;
  --violet-800: #1e1e1e;
  --violet-700: #2a2a2a;
  --dusk-text: #f0f0f0;
  --dusk-muted: #a8a8a8;

  /* ---- Journey background stops (html bg, scrolled) --------- */
  --journey-arrive: #f6f6f6;
  --journey-dawn:  #f1f1f1;
  --journey-noon:  #f4f4f4;
  --journey-late:  #e9e9e9;
  --journey-gold:  #e4e4e4;
  --journey-dusk:  #dcdcdc;

  /* ---- Strata tints (geological cross-section) -------------- */
  --stratum-1: #ebebeb;
  --stratum-2: #e2e2e2;
  --stratum-3: #d8d8d8;
  --stratum-bedrock: #cfcfcf;

  /* ---- Type -------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --text-hero: clamp(2rem, min(5vw, 9vh), 3.9rem);
  --text-h2: clamp(2rem, 4.6vw, 3.4rem);
  --text-h3: clamp(1.25rem, 2.4vw, 1.7rem);
  --text-lede: clamp(1.05rem, 1.6vw, 1.3rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.78rem;

  --leading-tight: 1.04;
  --leading-body: 1.65;
  --leading-slow: 1.85;      /* oasis cadence */

  /* ---- Space ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.75rem;
  --space-5: 2.75rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --band: clamp(5rem, 12vh, 9rem);

  /* ---- Layout ------------------------------------------------ */
  --measure: 62ch;
  --measure-oasis: 54ch;
  --container: 71.25rem;
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* ---- Surfaces ---------------------------------------------- */
  --radius-soft: 1.25rem;
  --radius-stone: 58% 42% 55% 45% / 46% 54% 44% 56%;
  --shadow-rest: 0 1px 2px rgba(17, 17, 17, 0.06), 0 12px 32px -12px rgba(17, 17, 17, 0.18);
  --shadow-raised: 0 2px 4px rgba(17, 17, 17, 0.08), 0 26px 56px -18px rgba(17, 17, 17, 0.28);
  --hairline: 1px solid rgba(17, 17, 17, 0.16);

  /* ---- Motion temperature (one temperature everywhere) ------- */
  --ease-sand: cubic-bezier(0.22, 0.8, 0.24, 1);
  --dur-breath: 700ms;
  --dur-settle: 1200ms;

  /* ============================================================
     THE TWO SIDES
     Digital reads white-on-black-text; security inverts the whole
     page. Every surface below is semantic, so the swap happens
     here and nowhere else. Pages without a data-mode (cv.html,
     blog.html, post pages) simply keep the light values.
     ============================================================ */

  /* — digital: warm paper, charcoal ink —
     The page was a neutral #e6e6e6 and read as a screen. It is paper
     now: #f3efe6, barely off white, with the card surface held high
     above it so cards still register as objects laid on it. The ink
     is charcoal rather than black, warmed by the same few degrees as
     the ground so the two belong to one sheet. Muted ink holds AA on
     the paper (5.55:1, up from 5.20 on the grey). This is a change of
     hue, not of tonal order: which surface sits above which, and by
     how much, is what it always was. */
  --bg: #f3efe6;
  --bg-deep: #ece7dc;
  --surface: #faf7f1;
  --surface-2: rgba(28, 24, 16, 0.05);
  --text: #16130d;
  --text-2: #3a352c;
  --text-3: #635d51;
  --line: rgba(28, 24, 16, 0.17);
  --line-soft: rgba(28, 24, 16, 0.1);
  --line-strong: rgba(28, 24, 16, 0.4);

  /* the floating toggle is 47px of pill sitting clamp(1rem,3vh,1.75rem)
     above the fold: anything that ends at the bottom of the viewport has
     to leave this much room, or it scrolls underneath and stays there */
  --switch-room: calc(clamp(1rem, 3vh, 1.75rem) * 2 + 3rem);
  --dotted: rgba(28, 24, 16, 0.32);

  /* the fine diagonal rule used as machine texture on card headers */
  --hatch: rgba(28, 24, 16, 0.05);

  /* ---- the construction drawing ------------------------------
     The background sketches in styles/sketch.css. They are quiet on
     purpose: a mark somebody left on the page, not a graphic. The
     three weights are the solid strokes, the dotted guides and the
     small dots, and --sketch-under is how much of the drawing stays
     on the page beneath the one that is redrawing itself. */
  --sketch-line: rgba(28, 24, 16, 0.18);
  --sketch-guide: rgba(28, 24, 16, 0.13);
  --sketch-dot: rgba(28, 24, 16, 0.23);
  --sketch-under: 0.32;

  /* inverted pair, for solid buttons and selection */
  --invert-bg: #16130d;
  --invert-text: #faf7f1;

  /* machine panels (terminals, readout, switch, footer) */
  --panel-bg: #141414;
  --panel-line: rgba(255, 255, 255, 0.13);
  --panel-text: #d6d6d6;
  --panel-dim: #9a9a9a;
  --panel-strong: #f2f2f2;
  --panel-shade: rgba(255, 255, 255, 0.05);

  --shadow-card: 0 18px 40px -26px rgba(40, 34, 22, 0.42);
  --shadow-lift: 0 22px 50px -28px rgba(40, 34, 22, 0.48);
  --shadow-float: 0 8px 30px -16px rgba(40, 34, 22, 0.38);
}

/* — security: a charcoal page, off-white ink.
     Not pure black: at #0b0b0b the page read as aggressive, so the
     ground is lifted to a soft charcoal and the type eased off pure
     white — and the primary type is now the light side's own paper
     colour, so the two appearances read as one sheet turned over
     rather than two palettes. The quieter greys below it are left
     where they were, because they are what holds AA on charcoal.
     Panels go the other way — recessed, like real screens set into
     the surface. — */
html[data-mode="security"] {
  --bg: #1a1a1a;
  --bg-deep: #141414;
  --surface: #232323;
  --surface-2: rgba(255, 255, 255, 0.05);
  --text: #f3efe6;
  --text-2: #c6c6c6;
  --text-3: #969696;
  --line: rgba(255, 255, 255, 0.15);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.42);
  --dotted: rgba(255, 255, 255, 0.32);

  --hatch: rgba(255, 255, 255, 0.055);

  /* the same drawing, at the weight charcoal can carry */
  --sketch-line: rgba(238, 236, 230, 0.11);
  --sketch-guide: rgba(238, 236, 230, 0.08);
  --sketch-dot: rgba(238, 236, 230, 0.14);

  --invert-bg: #f3efe6;
  --invert-text: #1a1a1a;

  /* recessed screens, a shade below the page */
  --panel-bg: #101010;
  --panel-line: rgba(255, 255, 255, 0.14);
  --panel-text: #d4d4d4;
  --panel-dim: #909090;
  --panel-strong: #f2f2f2;
  --panel-shade: rgba(255, 255, 255, 0.05);

  --shadow-card: 0 18px 40px -26px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 22px 50px -28px rgba(0, 0, 0, 0.95);
  --shadow-float: 0 8px 30px -14px rgba(0, 0, 0, 0.85);
}