/* ------------------------------------------------------------------
   SCEP design tokens.
   Palette and type scale follow penrosetactical.com (fetched 2026-09-27)
   so scep.city reads as a sibling site. Deviations from Penrose are
   marked "SCEP:".
   ------------------------------------------------------------------ */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg: #0b0d0c;                 /* SCEP: kept our own near-black (Penrose: #0c0e0c) */
  --bg-raised: #121512;
  --paper: #e8e6e0;              /* light "paper" band, same in both themes */
  --paper-fg: #0a1512;
  --paper-fg-muted: #5d635f;      /* SCEP: Penrose uses #676d69 (4.2:1); darkened to pass 4.5:1 */
  --paper-line: rgba(10, 21, 18, .2);
  --paper-accent: #0c6f41;        /* SCEP: Penrose uses #0e7a47 (4.3:1); darkened to pass 4.5:1 */

  /* Ink */
  --fg: #eef1ea;
  --fg-muted: #a2a89e;
  --fg-faint: #6d746a;
  --accent: #a9bd8f;
  --warn: #e08c84;

  /* Hairlines */
  --line: rgba(232, 236, 228, .14);
  --line-soft: rgba(232, 236, 228, .08);

  /* Type */
  --font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-hud: .8125rem;
  --text-chip: .6875rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --text-title: clamp(1.875rem, 4vw, 3.75rem);
  --text-display: clamp(2.25rem, 5.5vw, 4.5rem);

  /* Layout */
  --container: 75rem;            /* SCEP: ~1200px (Penrose: 85rem) */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --header-h: 4.75rem;
  --radius: .375rem;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --dur: .2s;

  /* Hero shading over photos */
  --shade-top: rgba(11, 13, 12, .72);
  --shade-mid: rgba(11, 13, 12, .18);
  --shade-low: rgba(11, 13, 12, .84);
  --shade-side: rgba(11, 13, 12, .42);

  /* Wall switch (easter egg) */
  --switch-plate: #1a1c1a;
  --switch-plate-edge: #2a2d2a;
  --switch-rocker: #c8c4bb;
  --switch-rocker-face: #ddd9d0;
  --switch-rocker-shadow: rgba(0, 0, 0, .35);
}

/* Lights on. Mirrors Penrose's light slide so the egg looks intentional. */
html[data-theme="light"] {
  --bg: #e8e6e0;
  --bg-raised: #dedbd3;

  --fg: #0a1512;
  --fg-muted: #5d635f;
  --fg-faint: #8f928e;
  --accent: #0c6f41;
  --warn: #a8382f;

  --line: rgba(10, 21, 18, .2);
  --line-soft: rgba(10, 21, 18, .1);

  --shade-top: rgba(232, 230, 224, .74);
  --shade-mid: rgba(232, 230, 224, .22);
  --shade-low: rgba(232, 230, 224, .9);
  --shade-side: rgba(232, 230, 224, .4);

  --switch-plate: #d8d4cb;
  --switch-plate-edge: #c4bfb4;
  --switch-rocker: #f4f2ec;
  --switch-rocker-face: #ffffff;
  --switch-rocker-shadow: rgba(0, 0, 0, .18);
}