/* tokens.css - THE ONE token authority for 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; no other stylesheet declares a custom property on
   :root (a SCOPED theme - the customer surface's light palette on .portal-surface -
   may override a token's VALUE under its own selector, never introduce a name).
   Breakpoints are not tokens: a media query cannot read a custom property, so the
   three the site uses - 600px (phone), 760px (the chrome's own switch), 820px (the
   wide layouts fold) - are literal where they are used and nowhere else. */

/* 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.

     The floor is measured against the WORST BACKGROUND this ink can land on, not
     against --bg. The home page composites three decorative layers over the base:
     the section gradients (up to #141310), body::before's gold wash
     (rgba(201,165,88,.1) at 83% opacity) and body::after's noise (3.5%, whose
     brightest pixels approach white). Together those lift the effective background to
     about #2b271e - and that is what small text actually sits on.

     That composite is also exactly what an automated scanner CANNOT compute, so it
     reports "incomplete" rather than a violation. #8a8170 passed 5.0:1 against the
     flat --bg and failed at 3.86:1 against the real one; the incomplete was hiding a
     genuine AA failure. #9c9280 measures 4.84:1 on that worst composite, 6.3:1 on the
     flat --bg and 6.0:1 on --panel, and stays visibly quieter than --ink-soft, which
     is what the third ink is FOR.

     Guarded by the accessibility scenario, which composites those layers and asserts
     the effective ratio - the check axe cannot make. Anything dimmer than this floor
     belongs to non-text decoration only. */
  --ink:#ede7da; --ink-soft:#b3aa98; --ink-dim:#9c9280;
  --gold:#c9a558; --gold-soft:#d9bd7e;
  --line:rgba(201,165,88,.18); --line-soft:rgba(237,231,218,.08);
  --green:#6fae74; --red:#c97a6a; --amber:#d9a441;

  /* 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-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* radii + control sizes + container. --radius-pill is the capsule every badge,
     chip and pill wears; --radius-round a circle. */
  --radius:4px; --radius-sm:3px; --radius-lg:6px; --radius-pill:999px; --radius-round:50%;
  --ctrl-h:40px; --icon-btn:34px;
  /* the numbered heading's column (site.css .numbered): the number's MINIMUM box and
     the gap to the text; a consumer that indents to match reads both */
  --num-col:26px; --num-gap:10px;
  --container:1120px;

  /* elevation + z-index scale (the fixed bar sits under the back-to-top button and
     under every overlay; the menu above the bar; modals above the menu) */
  --shadow-1:0 8px 24px rgba(0,0,0,.4);
  --z-nav:50; --z-top:80; --z-popover:120; --z-skip:150; --z-menu:200; --z-modal:300;
  --z-modal-2:320; --z-toast:400;

  /* motion — the shared language (mirrors the index page) */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);
  --ease-settle:cubic-bezier(.22,1,.36,1);
  --dur:.25s; --dur-slow:.6s;
  --menu-in:540ms;--menu-out:460ms;--nav-in:420ms;--nav-out:300ms;
  /* --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;

  /* THE CHROME CONTRACT, shared by BOTH chrome layers - site.css (marketing) and
     admin.css (console). They render different bars but must not drift apart in
     height, gutters, tap size, surface or the gilded rule, and neither stylesheet
     is loaded by the other, so the numbers live here where both can see them. */
  --chrome-pad-y:20px;--chrome-pad-x:28px;--chrome-tap:48px;
  /* The chrome's own surface: the bar at rest and once the page is scrolled.
     The console's header is one element carrying both its rows, so it takes
     this surface once and darkens as a whole. */
  --chrome-bg:rgba(15,14,12,.8);--chrome-bg-scrolled:rgba(15,14,12,.88);
  /* The one gilded rule every piece of chrome is closed with - the bottom of both fixed
     bars and the top of the footer. A gradient, not a colour, so it can only be worn
     through border-image; it fades out at both ends so the line reads as a highlight
     rather than a frame. Declared here with the other chrome numbers because both chrome
     layers wear it and neither loads the other's stylesheet. */
  --chrome-rule:linear-gradient(90deg,transparent,rgba(201,165,88,.55) 22%,rgba(201,165,88,.55) 78%,transparent);
  /* The width the FOOTER spans on every page. Deliberately its own value and not
     --container: the marketing home widens .container to 1180px for its hero, and
     the footer is shared chrome - it must be the same strip on the home page, on
     every other public page and in the console, so it takes this width and no page
     can move it. Note it is WIDER than the shared content container (1120px), so on
     pages other than the home one the footer spans 30px further each side than the
     content above it. That is the deliberate consequence of making the home page
     the reference. */
  /* Contact-line glyphs, one definition each. They are worn as a MASK tinted with
     currentColor, never as a background image: a data: URI cannot read a custom
     property, so a background would have to bake the colour in and could not follow the
     line's own ink or its hover state. Drawn here rather than pulled from an icon set -
     three paths in the same thin-line language as the social marks beside them. */
  --icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 11.3v1.9a1.3 1.3 0 0 1-1.4 1.3A12.5 12.5 0 0 1 1.5 4a1.3 1.3 0 0 1 1.3-1.4h1.9a1.3 1.3 0 0 1 1.3 1.1c.1.6.2 1.2.4 1.7a1.3 1.3 0 0 1-.3 1.4l-.8.8a10.3 10.3 0 0 0 3.9 3.9l.8-.8a1.3 1.3 0 0 1 1.4-.3c.5.2 1.1.3 1.7.4a1.3 1.3 0 0 1 1.1 1.3z'/%3E%3C/svg%3E");
  --icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='3.4' width='12.8' height='9.2' rx='1'/%3E%3Cpath d='m1.9 4.2 6.1 4.6 6.1-4.6'/%3E%3C/svg%3E");
  --icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.4 1.4'/%3E%3C/svg%3E");
  /* Generic access glyph for the Elysium accessibility trust mark. A person with
     arms out in a ring - deliberately NOT the International Symbol of Access and
     not any government emblem: our mark is our own claim, so it may not borrow a
     symbol that reads as somebody else's authorisation. */
  --icon-access:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Ccircle cx='8' cy='4.6' r='.85' fill='%23000' stroke='none'/%3E%3Cpath d='M4.9 6.6h6.2M8 6.6v3.1l-1.5 3M8 9.7l1.5 3'/%3E%3C/svg%3E");  --chrome-footer-max:1180px;
}