/* tokens.css — the single source of truth for design tokens shared across the
   Elysium front end, and the one place the two brand faces are declared. Beyond the
   @font-face block below there are no selectors here other than :root; every other
   stylesheet consumes these variables and never redefines a colour, duration or easing.
   (Breakpoints are documented here for reference; CSS media queries cannot read
   custom properties, so the pixel values are repeated literally in layout CSS.
   Keep them in sync with --bp-* below.) */

/* The faces --serif and --sans name. SELF-HOSTED (static/fonts/, SIL OFL, provenance
   in SOURCE.json next to them): this used to be a stylesheet from fonts.googleapis.com
   plus two preconnects, which was the only request the site made outside its own
   domain - a third party learning every visitor, and two extra connections before a
   single glyph.

   One file per family/style/subset, not per weight: Google serves a VARIABLE woff2
   covering the whole requested range and returns byte-identical files for each weight,
   so the range is declared instead of shipping the same bytes three times. Only what
   the stylesheets reference is here - Fraunces 300-500 plus italic 400, Outfit 300-600.
   The URLs are relative, so they resolve inside whatever hashed version served this
   file (deploy/nginx/CLAUDE.md owns that). Fraunces' optical-size axis is left to the
   browser's automatic sizing, exactly as the remote stylesheet did. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../../fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../../fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(../../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(../../fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../../fonts/outfit-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../../fonts/outfit-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* METRIC-MATCHED FALLBACKS. A web font decides where the baseline sits inside a line
   box, so until it is applied the text lands a pixel or two off - and the two chrome
   layers do not paint at the same moment (the console reveals itself only after
   /api/auth/me answers), which is exactly how the same footer line ends up sitting
   slightly lower on one page than the other. These faces give the local fallback the
   web font's own ascent, descent and average width, so the glyphs land in the same
   place whether the download has finished, is still in flight, or failed outright.
   Measured against the loaded faces in the browser: Outfit 1.0/0.26 em against Arial's
   0.91/0.21, Fraunces 0.98/0.26 against Georgia's 0.89/0.22 - hence the overrides. */
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:96.97%;ascent-override:103.13%;descent-override:26.81%;line-gap-override:0%}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia'),local('Times New Roman'),local('Liberation Serif');
  size-adjust:94.58%;ascent-override:103.61%;descent-override:27.49%;line-gap-override:0%}
:root{
  /* palette */
  --bg:#0f0e0c; --bg-2:#141310; --panel:#16140f;
  /* THREE inks, and the dimmest one has a FLOOR it may not go under. --ink-dim was
     #7d7464, which is 4.17:1 on --bg - under the 4.5:1 AA minimum for text this size,
     and it is used as small text in about twenty places (the home page's nav links and
     hero strip, field labels, hints, the footer's bottom line, console captions). One
     token was failing, so one token is the fix rather than twenty local exceptions.
     #8a8170 measures 5.0:1 on --bg and 4.8:1 on --panel, the lightest surface it is
     ever printed on, and stays visibly quieter than --ink-soft, which is what the
     third ink is FOR. Anything dimmer than this belongs to non-text decoration only. */
  --ink:#ede7da; --ink-soft:#b3aa98; --ink-dim:#8a8170;
  --gold:#c9a558; --gold-soft:#d9bd7e;
  --line:rgba(201,165,88,.18); --line-soft:rgba(237,231,218,.08);
  --green:#6fae74; --red:#c97a6a;

  /* typography */
  /* The fallback is metric-matched (above), so it must come BEFORE the generic
     families - a bare Georgia/-apple-system would put the baseline somewhere else. */
  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  --sans:'Outfit','Outfit Fallback',-apple-system,sans-serif;

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px;

  /* radii + control sizes + container */
  --radius:4px; --radius-sm:3px; --radius-lg:6px;
  --ctrl-h:40px; --nav-h:38px; --icon-btn:34px;
  --container:1120px;

  /* elevation + z-index scale */
  --shadow-1:0 8px 24px rgba(0,0,0,.4);
  --z-nav:100; --z-menu:200; --z-modal:300; --z-modal-2:320; --z-toast:400; --z-top:80;

  /* motion — the shared language (mirrors the index page) */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.18s; --dur:.25s; --dur-slow:.6s;
  /* --stagger is the reveal STEP between siblings. 50ms is the site default: at
     100ms a column of numbered clauses or questions kept the reader waiting on
     text that was already on screen. The home page overrides it back to 100ms -
     its groups are short rows of cards, where the wider step reads as a cascade
     rather than a delay - and legal.css halves it again for its long columns. */
  --reveal-shift:24px; --stagger:50ms;

  /* breakpoints (reference only — repeated literally in media queries) */
  --bp-sm:600px; --bp-mob:760px; --bp-wrap:820px;
}