/* The Eye — design tokens for the static site.
 *
 * The ONE file that may hold a raw colour value; every other stylesheet
 * reads colours through var(--…). test/design_tokens_test.dart holds it to
 * that, the same rule the app's theme test enforces on widgets.
 *
 * Colour NAMES are the "Living Case Archive" system (the Canvas design
 * system, 2026-09-19) and are final. VALUES follow the revised brand board
 * (2026-10-02, Aldy's call on 2026-10-07: the board wins): its black, red,
 * cream and tan. Change a value here and nowhere else. Everything under
 * "derived" is computed from those names, so it moves with them. Spacing
 * and radius names are the Canvas system's too; type, shadow and motion
 * are first values, ours to tune.
 *
 * Browser floor: the derived colours use color-mix(), so the site asks
 * for Safari 16.2 / iOS 16.2, Chrome 111 or Firefox 113 (all 2023). An
 * older browser drops those declarations: hairlines and scrims go, text
 * and backgrounds stay. No fallback layer on purpose; add one only if
 * the analytics ever show such a browser.
 */
@font-face {
  font-family: "CMU Typewriter";
  src: url("/web/fonts/cmu-typewriter.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CMU Typewriter";
  src: url("/web/fonts/cmu-typewriter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  /* ---- colour: the base palette (static UI, never a state signal) ---- */
  --void-black: #000000;   /* page background on every screen (board: main black) */
  --panel: #171512;        /* card and panel fills, nav, footer strips */
  --aged-paper: #e2d6be;   /* primary text and icons on dark; parchment fills (board: cream) */
  --paper-dim: #b39a71;    /* secondary text, captions, inactive borders (board: tan) */
  --ink: #3a3530;          /* text and icons ON aged-paper */

  /* ---- colour: the two signals (scarce on purpose) ---- */
  --signal-active: #4a7a96; /* a puzzle being worked right now — never idle UI */
  --signal-reward: #d9a441; /* a puzzle just solved, a room marked solved */

  /* ---- colour: the brand red ---- */
  /* The board puts it on labels, buttons, stamps and headings, not only the
   * logomark's X; the artwork carries it baked in, so the sheets match it. */
  --brand-mark-red: #661404;

  /* Not in the Canvas system: a failed build or a refused action needs a
   * colour the base palette has no word for. Provisional until Aldy names
   * it there; the site reads only this name. */
  --status-failed: #d97a5a;

  /* Not in the Canvas system either: the board's type on black (its nav,
     its headline's highlights, its filters, "Popular" and "rooms") is a
     cool light grey, not the cream, and its headline red is brighter than
     the brand red. Read off the board's own pages (2026-10-09), where its
     swatches render true; provisional until Aldy names them there. Cream
     (aged-paper) stays the paper's. */
  --type-on-dark: #d5d8db;
  --headline-red: #802225;
  --sort-marker: #8c4f3b; /* muted terracotta index marker on the case folder */

  /* ---- colour: derived (never edit a value here, edit the base) ---- */
  --panel-raised: color-mix(in srgb, var(--aged-paper) 8%, var(--panel));
  --line: color-mix(in srgb, var(--paper-dim) 20%, var(--void-black));
  --line-strong: color-mix(in srgb, var(--paper-dim) 40%, var(--void-black));
  --paper-muted: color-mix(in srgb, var(--paper-dim) 88%, var(--void-black)); /* the tan is darker than the old dim: 88% keeps 6:1 on void, 5.3:1 on panel */
  --wash: color-mix(in srgb, var(--aged-paper) 8%, transparent);   /* hover tint on dark */
  --scrim: color-mix(in srgb, var(--void-black) 80%, transparent); /* backdrops */
  --line-light: color-mix(in srgb, var(--type-on-dark) 45%, var(--void-black)); /* a control's edge on black: the board's grey, lifted to 3:1 */
  --torn-paper: color-mix(in srgb, var(--aged-paper) 48%, var(--paper-dim)); /* the torn edge's cream (torn-edge-v6.webp, #c6b89b) */

  /* ---- type ---- */
  /* American Typewriter ships with macOS and iOS (no web licence, so no
   * file); everyone else gets CMU Typewriter Text Variable Width, the
   * designer's pick (SIL OFL), self-hosted below as two Latin subsets.
   * Bold is synthesised: the proportional cut has no bold of its own. */
  --font-display: "American Typewriter", "CMU Typewriter", "Courier New", ui-monospace, monospace;
  --font-body: "American Typewriter", "CMU Typewriter", "Courier New", ui-monospace, monospace;
  --text-xs: .72rem;
  --text-sm: .84rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-display: clamp(2.6rem, 5.6vw, 5.5rem);
  --leading-tight: 1.02;
  --leading-body: 1.5;

  /* ---- spacing (Canvas: 4 8 16 20 24; the larger steps are ours) ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;   /* base layout unit: card gaps, section padding */
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;   /* between page sections */

  /* ---- radius (Canvas) ---- */
  --radius-sm: 4px;     /* badges, small pills, tags */
  --radius-md: 8px;     /* cards, buttons, inputs */
  --radius-lg: 24px;    /* large parchment cards, the archive slab, dialogs */
  --radius-full: 9999px;

  /* ---- shadow ---- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--void-black) 60%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--void-black) 55%, transparent);
  --shadow-lg: 0 30px 90px color-mix(in srgb, var(--void-black) 70%, transparent);

  /* ---- motion ---- */
  --motion-fast: 120ms;  /* hover and focus */
  --motion-base: 240ms;  /* fades, small moves */
  --motion-slow: 500ms;  /* image zooms, scene changes */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- layout: a 12-column grid (4 on a phone) ---- */
  /* One content width for every page: the header, the footer and each
     page's sections share its edges. 1440px fills the common 1536 and 1920
     screens; below that it is the screen less its margins. Measured from
     the viewport (100vw), so anything can size itself in columns, not only
     the container's own children. */
  --columns: 12;
  --gutter: 32px;
  --page-margin: 32px;
  --container: min(1440px, 100vw - 2 * var(--page-margin));
  --col: calc((var(--container) - (var(--columns) - 1) * var(--gutter)) / var(--columns));
  --span-8: calc(var(--col) * 8 + var(--gutter) * 7);
  --span-10: calc(var(--col) * 10 + var(--gutter) * 9);
  --measure: var(--span-8); /* the reading width: profile, pricing */
}
/* Tablets and small laptops: still 12 columns, a tighter gutter, and the
   reading pages take the whole container. */
@media (max-width: 1279px) {
  :root { --gutter: 24px; --page-margin: 24px; --measure: var(--container); }
}
/* Phones: 4 columns; a 10- or 8-column piece is the whole width. */
@media (max-width: 767px) {
  :root { --columns: 4; --gutter: 16px; --page-margin: 16px; --span-8: var(--container); --span-10: var(--container); }
}