/* ==========================================================================
   ZERO NINE — DESIGN TOKENS  (assets/css/tokens.css)
   --------------------------------------------------------------------------
   THIS IS THE COLOUR FILE. Every colour on the site — buttons, text, lines,
   glows, the 3D callouts and the signal colours inside the 3D scenes — is
   read from the variables below. Change a value, save, and the whole site
   follows. Nothing else needs touching.

   HOW TO RE-COLOUR THE SITE
   1. Quick:  pick a ready-made scheme. On the <html> tag of every page,
              set  data-scheme="ember" | "steel" | "sand" | "arctic" | "crimson"
              (or try one live by adding ?scheme=steel to the page URL).
   2. Custom: edit the five BRAND values in section 1 below.
   3. Deep:   fine-tune surfaces and ink in sections 2 and 3.

   Load order: tokens → base → layout → components → pages
   ========================================================================== */

:root {
  /* ---------- 1. BRAND — the five colours that define the look ---------- */
  --accent:      #ff5a1f;   /* signal colour: CTAs, alerts, active state, key words (keep it under ~3% of a screen) */
  --accent-ink:  #ffffff;   /* text sitting ON the accent colour */
  --data:        #8fb3c8;   /* telemetry: data links, 3D callouts, sensor beams */
  --ok:          #d9d4c7;   /* status dots: online / confirmed (neutral — no green) */
  --caution:     #f0a830;   /* warnings, amber states */
  --link:        #72737202;   /* 3D communication links between assets (drawn as solid cables over the terrain) */

  /* ---------- 2. SURFACES — true neutral graphite (no green or blue cast) ---------- */
  --void:        #1f1e1e;   /* page background */
  --deep:        #070708;   /* deepest bands: footer, consoles, boot screen */
  --surface:     #121213;   /* cards, panels */
  --surface-2:   #19191b;   /* raised / hover */
  --line:        #232325;   /* hairline */
  --line-2:      #343437;   /* hairline, stronger */
  --line-3:      #1a1a1c;   /* ghost numerals, outline type */

  /* ---------- 3. INK — warm bone, never pure white ---------- */
  --bone:        #f5f4f1;   /* primary text */
  --bone-2:      #a6a5a2;   /* secondary text */
  --bone-3:      #76736c;   /* labels, meta */
  --bone-4:      #46443f;   /* disabled, outline strokes */

  /* ---------- 4. GLASS (frosted panels from the v4 design) ---------- */
  --glass:       color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-line:  color-mix(in srgb, var(--bone) 9%, transparent);
  --glass-blur:  14px;

  /* ---------- legacy names (kept so older markup keeps working) ---------- */
  --ember:       var(--accent);
  --ember-dim:   color-mix(in srgb, var(--accent) 70%, #000);
  --steel:       var(--data);
  --nvg:         var(--ok);
  --amber:       var(--caution);

  /* ---------- TYPE ----------
     Display: Barlow Semi Condensed — thin, condensed, signage-like (tactical)
     Body:    IBM Plex Sans Light   — engineering / systems documentation feel
     Labels:  IBM Plex Mono         — telemetry, coordinates, metadata
     Fonts are loaded in the <head> of every page (Google Fonts link). */
  --f-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --w-display: 300;   /* hero + h1 weight   (200 = hairline · 300 = thin · 400 = regular) */
  --w-heading: 400;   /* h2–h4, card titles, programme names */
  --w-body:    300;   /* running text */
  --track-display: .01em;  /* letter-spacing of headlines */

  --t-hero:   clamp(54px, 7.6vw, 136px);
  --t-h1:     clamp(44px, 5.6vw, 96px);
  --t-h2:     clamp(34px, 3.8vw, 68px);
  --t-h3:     clamp(24px, 2.2vw, 38px);
  --t-h4:     clamp(19px, 1.3vw, 24px);
  --t-lede:   clamp(16px, 1.15vw, 11.5px);   /* secondary paragraphs: min · grows with screen · max */
  --t-body:   clamp(15px, .95vw, 21px);
  --t-mono:   11.5px;                      /* small mono labels (telemetry, tags, section labels). 11–13px reads best */

  /* ---------- SPACE / LAYOUT ---------- */
  --gut:   clamp(20px, 4.4vw, 68px);
  --max:   1860px;
  --nav-h: 72px;
  --sec:   clamp(74px, 8.5vw, 150px);   /* vertical rhythm between sections */
  --radius: 2px;                        /* corner radius for cards & buttons (0 = razor sharp) */

  /* ---------- MOTION ---------- */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.76, 0, .24, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast: .25s;
  --d-mid:  .35s;
  --d-slow: .9s;
}

/* ==========================================================================
   READY-MADE SCHEMES — set data-scheme="…" on <html>.
   Each one only overrides the brand colours (and, for "sand", the surfaces).
   Copy one of these blocks to start your own.
   ========================================================================== */

/* EMBER — signal orange on graphite (default, same as :root) */
[data-scheme="ember"] { --accent: #72c105; --accent-ink: #ffffff; --data: #c5c8ca; }

/* STEEL — cold electric blue, very "systems" */
[data-scheme="steel"] {
  --accent: #3d8bff; --accent-ink: #ffffff; --data: #a9c4d6; --ok: #cfd8e0;
  --void: #0a0b0d; --deep: #060708; --surface: #111317; --surface-2: #181b20; --line: #22252b; --line-2: #33373e;
}

/* SAND — desert khaki and brass, warm surfaces */
[data-scheme="sand"] {
  --accent: #d9a441; --accent-ink: #120f09; --data: #b9b09a; --ok: #e6dcc4; --caution: #e0703a;
  --void: #0d0c0a; --deep: #080706; --surface: #15130f; --surface-2: #1d1a15; --line: #282520; --line-2: #3a362e;
  --bone: #efe8d8; --bone-2: #b1a993; --bone-3: #7d7663; --bone-4: #4a4538;
}

/* ARCTIC — monochrome white signal, ice-blue data */
[data-scheme="arctic"] {
  --accent: #f2f4f5; --accent-ink: #0b0b0c; --data: #9cc6dd; --ok: #f2f4f5;
}

/* CRIMSON — deep tactical red */
[data-scheme="crimson"] { --accent: #e5383b; --accent-ink: #ffffff; --data: #b5bcc4; --ok: #d9d4c7; }

/* Reduced motion: the site stays fully readable, just still. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: .01s; --d-mid: .01s; --d-slow: .01s; }
}