/* tokens.css — TO-CC-837 GREEN 1, Raul 09-15 ("go ahead with your suggestions").
 * ONE token sheet for the whole site: custom properties only, nothing that selects an element.
 * Loaded on every human-facing route (landing, store, dashboard, cemetery/world, login, possibilities)
 * so its variables resolve on :root everywhere — and consumed by NOTHING yet. The surface briefs
 * (TO-CC-838 onward) are what point real rules at these names. Until then this file is provably inert:
 * grep the repo for var(--fs- / var(--sp- / var(--accent) outside this file and outside this comment
 * and you will find zero hits.
 *
 * Values ruled here, not invented in this round: type (Instrument Sans / Fraunces, a 7-step scale),
 * space (a 9-step scale + gutter + content width), color (one dark ground, one accent, one being-link
 * orange, a separate cemetery mood set), shape (three radii, one hairline, one focus ring, one easing).
 * The landing page (lib/walk/template.js) already carries the closest-to-right version of several of
 * these — Fraunces, Instrument Sans, #22d3c5 — which is why the audit named it the newest and closest
 * to right and why these values match it rather than the five other headers/accents it found.
 *
 * THE GLASS LAYER (TO-CC-878, Raul 09-16 9:58 AM ET: "a feel that is sort of liquidy or in tune with
 * Apple trends"). Glass is for what FLOATS over the field or over content: the header, the composer,
 * the rail, bubbles, sheets, panels, the account menu. NEVER for the ground, the store's card grid, the
 * cemetery's cards, forms on flat pages, or mail — glass on the ground makes the site a screensaver and
 * the words lose. A glass surface is --glass (or --glass-dark where it carries text over bright points)
 * with --glass-blur behind it, --glass-edge as its only shadow (a top highlight; no drop shadow on
 * dark), and --glass-line where it needs an edge. Corners are CONCENTRIC: an element inside a rounded
 * parent uses the parent's radius minus the padding, never a larger one. Motion: --spring for things
 * that appear, open or land; --ease stays for color and opacity.
 */

:root {
  /* ---- type -------------------------------------------------------------------------------- */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;

  --fs-0: 12px;   /* nothing on the site renders under this */
  --fs-1: 13px;   /* ids/addresses: var(--font-sans), letter-spacing 0.04em, font-variant-numeric tabular-nums */
  --fs-2: 15px;   /* body — weight 400, never 300 for running text */
  --fs-3: 17px;
  --fs-4: 22px;
  --fs-5: 30px;
  --fs-6: 44px;

  --lh-body: 1.5;
  --lh-tight: 1.2;

  /* weights in use, documented rather than tokenised (a number is not a name to consume):
     400 body, 500 labels/buttons, 600 sans headings; Fraunces at 300/400. */

  /* ---- space --------------------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: 24px;          /* desktop */
  --content-max: 1120px;

  /* ---- color ----------------------------------------------------------------------------------
     one ground for the whole site. */
  --bg: #080d14;
  --surface: rgba(219, 231, 234, 0.04);
  --surface-2: rgba(219, 231, 234, 0.07);
  --line: rgba(219, 231, 234, 0.12);
  --text: #dbe7ea;
  --muted: #6f8b93;
  --accent: #22d3c5;
  --accent-ink: #06232a;      /* text on an accent fill */
  --accent-soft: rgba(34, 211, 197, 0.10);
  --link-being: #ff9436;      /* exactly one job: a link that leads to a being ("Talk with Dadyr") */
  /* TO-CC-1127 GREEN 1 — the mat under a picture on the store: a plain warm off-white ground, never
     used as a page background. See lib/gallery/html.js's `.mat-on` rules for where it is consumed
     (behind `gallery_mat` config, read at render — this token itself is inert until that flag is on). */
  --mat: #ece8df;

  /* cemetery mood set — used only under /cemetery, on the same --bg. Not scoped at the CSS level by
     this item (nothing consumes it yet); the surface brief that wires it decides how it's scoped. */
  --text-warm: #e8e4d9;
  --muted-warm: #b4b0a4;
  --gold: #c89968;

  /* ---- shape ------------------------------------------------------------------------------- */
  --r-control: 4px;
  --r-card: 8px;
  --r-pill: 999px;
  --hairline: 1px solid var(--line);   /* the current 0.667px lines are one physical px only at 150% scaling */
  --focus-ring: 0 0 0 2px rgba(34, 211, 197, 0.6);
  --ease: 150ms ease-out;              /* color and opacity */

  /* ---- glass (TO-CC-878) — see the head comment for where glass is allowed ---------------------- */
  --glass: rgba(219, 231, 234, 0.06);
  /* TO-CC-1247 GREEN 1 — the SAME neutral as --glass, twice the alpha. The one job: the near voice.
     In the bound chat the principal's own bubble reads denser than the being's, which is half of
     "who is speaking" at a glance (the other half is the being's tint edge, which is per-being and
     therefore inline, not a token). Same hue by construction — it is --glass's own rgb, so this can
     never drift into a second colour. */
  --glass-near: rgba(219, 231, 234, 0.12);
  --glass-dark: rgba(8, 13, 20, 0.55);            /* the tint for glass that carries text over bright points */
  /* TO-CC-1247 GREEN 1 — --glass-dark's own tint applied TWICE (0.55 + 0.45*0.55 = 0.7975), so it is
     derived from --glass-dark rather than chosen beside it. The near voice over a BRIGHT ground, where
     "denser" has to mean more of the dark film and not more of the light one: raising --glass-near over
     the orb's core would have taken the principal's words from 3.17:1 to 2.71:1 against white, measured.
     This takes them to 8.42:1. Same idea as --glass-near, expressed for the other ground. */
  --glass-dark-near: rgba(8, 13, 20, 0.7975);
  --glass-blur: blur(24px) saturate(140%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14);   /* the top highlight; no other shadow on dark */
  --glass-line: 1px solid rgba(219, 231, 234, 0.10);

  /* concentric radii for the floating layers; cards and controls on flat pages keep --r-card / --r-control */
  --r-capsule: 22px;   /* the composer, the rail, pills */
  --r-sheet: 20px;
  --r-bubble: 18px;    /* with the one flatter corner at --r-control */

  /* things that appear, open, or land: a sheet, the menu, a bubble arriving, the render tile becoming
     the image. Slight overshoot, then settle. */
  --spring: 320ms cubic-bezier(0.32, 1.25, 0.5, 1);
}

@media (max-width: 768px) {
  :root { --gutter: 16px; }
}

/* Both durations collapse to 0: a surface still appears, it just no longer travels. */
@media (prefers-reduced-motion: reduce) {
  :root { --ease: 0ms ease-out; --spring: 0ms linear; }
}