/* tokens.css — the single source of truth for the client app's visual primitives.
 *
 * This is the layer a redesign edits first. Every value in app.css references a
 * token here; app.css carries NO raw colour, and the contract check fails the
 * build if it does (raw-colour) or if a var() resolves to nothing
 * (unresolved-token) or a token here goes unreferenced (unused-token).
 *
 * Colours are stored as space-separated RGB CHANNELS so a single hue serves both
 * solid and alpha uses — rgb(var(--accent-rgb)/.12) — the need that broke the
 * original :root and scattered the accent across literals. Re-skin by changing a
 * channel here once; every surface follows.
 */
:root {
  color-scheme: dark;

  /* Colour — channels (own the hue once, compose alpha at the use site) */
  --accent-rgb: 216 255 97;     /* lime  #d8ff61 */
  --accent-2-rgb: 110 231 249;  /* cyan  #6ee7f9 */
  --text-rgb: 248 251 247;      /* off-white #f8fbf7 */
  --surface-rgb: 255 255 255;   /* glass white */
  --shadow-rgb: 0 0 0;          /* black, for depth shadows */
  --scrim-rgb: 21 24 23;        /* app-chrome scrim behind the sticky bar */
  --veil-top-rgb: 6 10 10;      /* photo darkening — top of the background image */
  --veil-deep-rgb: 4 8 8;       /* photo darkening — deepest stop */
  --veil-rgb: 6 8 8;            /* photo darkening — the page after-layer */

  /* Colour — resolved roles */
  --bg: #111615;                /* page base behind the photo layers; this hex is also
                                 * what the markup emits for browser chrome (theme-color
                                 * meta + manifest). chrome-untokened enforces every
                                 * chrome hex is SOME token here — not --bg specifically */
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --accent-ink: #f7ffc9;        /* lime text on a lime tint */
  --accent-ink-soft: #f9ffe5;   /* near-white lime ink (primary button text) */
  --accent-ink-dim: #d8ffb0;    /* soft lime ink (logged pill) */
  --danger: #ff8f8f;            /* error states */
  --ink: #fff;                  /* strongest headings */
  --text: rgb(var(--text-rgb));
  --muted: rgb(var(--text-rgb) / .68);
  --line: rgb(var(--surface-rgb) / .2);

  /* Radius scale */
  --r-sm: 14px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-2xl: 22px;
  --r-3xl: 24px;
  --r-4xl: 30px;
  --r-pill: 999px;

  /* Backdrop blur scale (glass depth) */
  --blur-sm: 18px;
  --blur-md: 20px;
  --blur-lg: 22px;
  --blur-xl: 28px;

  /* Saturation scale (paired with blur in the glass recipe; --sat-photo is the
   * background image's own filter) */
  --sat-1: 1.2;
  --sat-2: 1.25;
  --sat-3: 1.26;
  --sat-4: 1.35;
  --sat-photo: 1.12;

  /* Motion */
  --t-fast: .12s;
  --t: .16s;

  /* Breakpoints are not tokens: CSS cannot read a custom property inside @media,
   * so the @media literals in app.css are their own single source — there is
   * nothing to declare here and nothing to keep in sync. */
}