/* ============================================================================
   ET3 Media — Design Tokens (single source of truth)   v2.0
   ----------------------------------------------------------------------------
   Every marketing page imports this as its FIRST stylesheet, then
   /et3-site.css (the shared component layer). Per-page :root duplicates are
   forbidden — `check-tokens.sh` fails the deploy if a `:root{` declaration
   appears in any hand-authored page instead of this file. Edit tokens ONLY here.

   v2.0 changes (site redesign brief, 2026-09):
     • index.html is no longer a Claude Design bundler blob — it is a hand-
       authored page on this token system like every other page.
     • estimate.html now imports this file too. Its portal-blue accent is kept
       for continuity with the client hub, expressed as html[data-page=estimate]
       below rather than a private :root copy.
     • Orbitron is retired. --font-ui is an alias of --font-sans so any leftover
       reference degrades to Space Grotesk instead of loading a fourth family.
     • Type roles, spacing scale, container widths, border/focus/motion tokens
       added so pages stop re-declaring them.
   ============================================================================ */

:root{
  /* ── Colour: the void + surfaces ── */
  --void:#0a0612; --void-2:#150828; --terminal:#0f0820; --terminal-2:#1a0d33;
  --surface:#110b20;            /* near-solid panel behind paragraphs, forms, pricing */
  --surface-2:#160f2a;          /* raised card */
  --surface-3:#1d1436;          /* hover / active card */

  /* ── Colour: accents ── */
  --cyan:#00F0FF; --magenta:#FF2D9A; --et3-blue:#27AAE1; --sunset:#FF6B1A;
  /* Brand yellow, approved Ed Tatton S67. Two surface-specific aliases carry
     the guardrail: --yellow-on-void is approved on #0a0612 / #150828 only;
     everything lighter uses --yellow-on-surface. Never white text on yellow. */
  --hot-yellow:#F5E642; --yellow-dim:#B8A800;
  --yellow-on-void:var(--hot-yellow); --yellow-on-surface:var(--yellow-dim);
  --violet:#B14CFF;
  --neon-green:#39FF14;

  /* ── Colour: text ── */
  --cream:#F4ECD8; --cream-dim:#c6bea8; --muted:#877dab;
  --text:var(--cream); --text-muted:var(--cream-dim); --text-faint:var(--muted);

  /* ── Colour: edges + grid ── */
  --edge:rgba(0,240,255,.40); --edge-soft:rgba(255,255,255,.10);
  --grid-cyan:rgba(0,240,255,.16);
  --grid-quiet:rgba(0,240,255,.05); /* the body grid behind reading content */

  /* ── Type families ── */
  --font-display:"Audiowide",system-ui,sans-serif;                       /* major statements */
  --font-sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;        /* paragraphs, nav, forms, subheads */
  --font-mono:"Space Mono",ui-monospace,monospace;                       /* short labels, terminal details */
  --font-ui:var(--font-sans);                                            /* legacy alias (Orbitron retired) */

  /* ── Type roles ── */
  --text-xs:14px;   /* smallest functional label */
  --text-sm:15px;
  --text-base:17px; /* body */
  --text-lg:19px;
  --text-xl:22px;
  --h3:clamp(20px,2.1vw,24px);
  --h2:clamp(26px,3.2vw,38px);
  --h1:clamp(36px,5vw,62px);
  --lh-body:1.6; --lh-tight:1.1;
  --measure:62ch;

  /* ── Spacing scale ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section-pad:clamp(56px,8vw,96px);

  /* ── Containers ── */
  --container:1120px; --container-wide:1320px; --container-narrow:760px;
  --gutter:clamp(20px,4vw,40px);
  --header-h:72px;

  /* ── Borders / corners ── */
  --radius:2px; --corner:14px; --border:1px solid var(--edge-soft);

  /* ── Focus ── */
  --focus-ring:0 0 0 3px var(--void), 0 0 0 6px var(--cyan);

  /* ── Motion ── */
  --dur-fast:120ms; --dur:220ms; --dur-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.22,.61,.36,1);

  /* ── Z-index ── */
  --z-header:50; --z-menu:60; --z-dialog:200; --z-lightbox:300; --z-intro:900;

  /* Default accent = website cyan; each page overrides via html[data-page]. */
  --accent:#00F0FF;
  --accent-soft:rgba(0,240,255,.40);
  --accent-faint:rgba(0,240,255,.06);
  --accent-glow:rgba(0,240,255,.5);
  --accent-grid:rgba(0,240,255,.16);
}

/* ── PER-PAGE ACCENTS ── */

/* WEBSITE = CYAN (#00F0FF) */
html[data-page="website"]{
  --accent:#00F0FF;
  --accent-soft:rgba(0,240,255,.40);
  --accent-faint:rgba(0,240,255,.06);
  --accent-glow:rgba(0,240,255,.5);
  --accent-grid:rgba(0,240,255,.16);
}

/* BRAND = YELLOW (#F5E642) */
html[data-page="brand"]{
  --accent:#F5E642;
  --accent-soft:rgba(245,230,66,.42);
  --accent-faint:rgba(245,230,66,.07);
  --accent-glow:rgba(245,230,66,.45);
}

/* PRINT & SIGNAGE = MAGENTA (#FF2D9A), paired with cyan (#00F0FF) */
html[data-page="print"]{
  --accent:#FF2D9A;
  --accent2:#00F0FF;
  --accent-soft:rgba(255,45,154,.45);
  --accent-faint:rgba(255,45,154,.08);
  --accent-glow:rgba(255,45,154,.5);
}

/* ESTIMATE = portal blue (#29ABE2) — continuity with the client project hub.
   The estimator's controls use the portal palette; header/footer/buttons come
   from the shared layer and inherit these values. */
html[data-page="estimate"]{
  --void:#080d1a; --surface:#0d1324; --surface-2:#111a30; --surface-3:#16213d;
  --accent:#29ABE2;
  --accent-soft:rgba(41,171,226,.40);
  --accent-faint:rgba(41,171,226,.06);
  --accent-glow:rgba(41,171,226,.5);
  --accent-grid:rgba(41,171,226,.14);
  --grid-quiet:rgba(41,171,226,.05);
  --edge:rgba(41,171,226,.40);
  --focus-ring:0 0 0 3px var(--void), 0 0 0 6px #29ABE2;
}

/* ── YELLOW-ON-VOID GUARDRAIL (Nova Rec 03 — Contrast) ──
   Use this class for yellow-background labels. Do NOT set a yellow background
   ad hoc — #F5E642 is legible only on the approved dark surfaces. */
.label-on-yellow{
  color: var(--void);
  background: var(--hot-yellow);
}