/* frontend/visitor/tokens.css
 *
 * THE ONE PLACE COLOUR, TYPE AND SPACING ARE DEFINED. Both surfaces read this
 * file — the visitor page and the owner page at /setup — and neither defines a
 * token of its own. That is what made this restyle a value swap rather than a
 * rewrite: the palette below changed completely and most component CSS did not
 * have to move.
 *
 * PALETTE — oxidised copper on wet slate.
 * Every value comes from one physical scene rather than being picked to look
 * nice beside the last one: the verdigris patina on a copper roof, and the
 * slate beneath it. That is why the greys are cool rather than neutral — they
 * belong to the same object as the accent, so the two never look glued
 * together.
 *
 * The accent appears ONCE per screen, on the single action that matters. If
 * two things on a screen are verdigris, one of them is wrong.
 */
:root {
  /* --- type ---------------------------------------------------------------
     Archivo carries a width axis, which is why it is here: display type sits
     slightly tight, small caps labels open. IBM Plex Mono takes anything a
     person may need to read character by character — links, ids, counts —
     where a proportional face makes 1 and l the same shape. */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Six sizes, up from three. The old scale (14/18/28) could not tell a
     caption from a label from a heading, so everything drifted to the middle
     and both pages read flat. --text-sm and --text-md keep their names but
     shift by a point; --text-lg grows. Nothing referencing them breaks. */
  --text-caps: 11px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 20px;
  --text-lg: 32px;
  --text-xl: 48px;

  --tracking-tight: -0.025em;
  --tracking-caps: 0.13em;

  /* --- slate ramp ---------------------------------------------------------
     A real ramp rather than three greys, so hierarchy has somewhere to live.
     Cool-biased to sit with the verdigris; a warm or perfectly neutral grey
     would read as a different material. */
  --color-slate-900: #0f1417;
  --color-slate-800: #171e21;
  --color-slate-700: #232b2f;
  --color-slate-600: #364146;
  --color-slate-500: #5c6970;
  --color-slate-400: #7e8c94;
  --color-slate-300: #a7b3b9;
  --color-slate-200: #c9d2d6;
  --color-slate-100: #dde4e7;
  --color-slate-050: #f4f7f8;

  /* --- accent -------------------------------------------------------------
     THE bright patina is light, so text on it must be near-black. That is the
     entire reason --color-on-accent exists. The previous accent was a dark
     blue and every filled button painted near-white text on it; swapping in a
     light accent without this token would have shipped white-on-teal, which
     cannot be read. */
  --color-accent: #4ec5b0;
  --color-on-accent: #0b1416;
  --color-accent-deep: #0e6e62;   /* accent as text or border on light grounds */
  --color-accent-wash: #132e2c;   /* quiet accent fill on slate */
  --color-accent-tint: #e2f1ee;   /* quiet accent fill on light */

  /* --- semantic -----------------------------------------------------------
     Deliberately not the accent. A warning is not a brand moment, and green
     and red here are states rather than decoration. */
  --color-live: #3f9e7c;
  --color-warn: #8a6413;
  --color-warn-bg: #fdf3dc;
  --color-danger: #b04a3a;

  /* --- surfaces -----------------------------------------------------------
     Names carried over from the previous set so component CSS keeps working. */
  --color-background: #0f1417;
  --color-surface: #ffffff;
  --color-surface-dark: #171e21;
  --color-text: #0f1417;
  --color-text-on-dark: #f4f7f8;
  --color-text-muted: #5c6970;
  --color-border: #dde4e7;
  --color-border-dark: #232b2f;
  --color-video-backdrop: #000000;
  --color-overlay-scrim: rgba(11, 20, 22, 0.72);

  /* --- form ---------------------------------------------------------------
     A hairline rather than a moulded card. The old 20px radius and two-layer
     inset shadow were doing work that spacing and hierarchy should do, and
     they are most of why the pages read as unfinished. Radius is now nearly
     square — this is signage, and signage has no soft corners. --radius-pill
     stays for the one control that has to read as round. */
  --radius: 4px;
  /* For marks small enough that --radius reads as a circle rather than a
     softened corner — currently just the 18px brand square in the topbar. */
  --radius-sm: 2px;
  --radius-pill: 999px;
  --shadow-raised: 0 1px 2px rgba(15, 20, 23, 0.06), 0 8px 24px -16px rgba(15, 20, 23, 0.28);

  /* --- spacing ------------------------------------------------------------
     4/8/16/24/32 unchanged, plus two larger steps the old scale lacked —
     which is why the previous layouts had no room to breathe at page level. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}