/* =========================================================================
   TOKENS  —  the single knobs panel for the whole wireframe
   XELNIUM BRAND APPLIED (2026-07-17): Ink / Navy / Slate / Electric / Acid.
   Change a value here and it cascades everywhere. Start your redesign here.
   Palette ref: ~/Desktop/Xelnium Colors.png  (locked in Xelnium Brand System)
   ========================================================================= */

/* Font: real file vhs-intro/vhs-assets/visitor-brk/visitor1.woff2.
   ⚠️ url() IN CSS RESOLVES AGAINST THE STYLESHEET, NOT THE DOCUMENT OR THE SITE
   ROOT. This file lives in vhs-intro/css/, so the path must climb one level.
   It previously read "Assets/visitor-brk/…", which resolved to
   vhs-intro/css/Assets/… — a 404 that Cloudflare Pages answers with index.html
   as 200 text/html, so it looked like a success while every preloader element
   silently fell back to Courier New. Keep it relative (no leading slash) so it
   still resolves under file:// for a double-click open. */
@font-face {
  font-family: "Visitor TT1 BRK";
  src: url("../vhs-assets/visitor-brk/visitor1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* `block`, NOT `swap`. swap paints the FALLBACK immediately and switches when the
     font arrives — which is exactly the one-second Courier flash on "LOADING".
     block keeps the text invisible for up to ~3s instead, so the first glyphs a
     visitor sees are already Visitor TT1 BRK. Safe here specifically because this
     is a preloader: there is no content to read yet, the font is same-origin and
     preloaded in index.html, and if it somehow exceeded the block period the text
     would appear in the fallback rather than never. */
  font-display: block;
}

:root {
  /* ---- XELNIUM PALETTE (locked) ---- */
  --ink-brand:  #0D0F12;   /* Ink   — page base            */
  --navy:       #0F1826;   /* Navy  — alt section bg        */
  --slate:      #232F41;   /* Slate — placeholder boxes     */
  --electric:   #005EFF;   /* Electric — accent / active    */
  --acid:       #DAE74C;   /* Acid  — highlight / accent-2   */

  /* ---- COLOR TOKENS (mapped to Xelnium) ---- */
  --bg:            var(--ink-brand);   /* page background (dark luxury) */
  --bg-alt:        var(--navy);        /* alternating section bg        */
  --box:           var(--slate);       /* default placeholder box       */
  --box-2:         #2E3E54;            /* lighter box / hover           */
  --box-3:         #34465E;            /* lightest placeholder box      */
  --line:          #2A3749;            /* hairline borders              */
  --ink:           #ECE9F1;            /* primary text (light on dark)  */
  --ink-soft:      #9AA0B0;            /* secondary text                */
  --ink-faint:     #6B7280;            /* placeholder / captions        */
  --accent:        var(--electric);    /* buttons / active / links      */
  --accent-2:      var(--acid);        /* highlight strips / marquee    */
  --on-accent:     #FFFFFF;            /* text on accent buttons        */

  /* ---- TYPE ---- */
  --font-sans: "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-hero:   clamp(2.6rem, 9vw, 8.5rem);
  --fs-h2:     clamp(1.9rem, 5vw, 4rem);
  --fs-h3:     clamp(1.3rem, 2.6vw, 2.1rem);
  --fs-body:   clamp(0.95rem, 1.15vw, 1.15rem);
  --fs-small:  0.8rem;
  --tracking-caps: 0.18em;

  /* ---- SPACE ---- */
  --gutter:    clamp(1.2rem, 4vw, 4rem);
  --section-y: clamp(4rem, 12vh, 11rem);
  --radius:    14px;
  --radius-lg: 22px;
  --maxw:      1440px;

  /* ---- MOTION (edit these to retune every animation at once) ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:  0.35s;
  --dur:       0.7s;
  --dur-slow:  1.1s;

  /* ---- CHROME ---- */
  --nav-h:     72px;
  --z-nav:     900;
  --z-menu:    950;
  --z-modal:   980;
  --z-preload: 1000;
}