/* ============================================================
   COMPTECH DESIGN SYSTEM v1.0 — DESIGN TOKENS
   ------------------------------------------------------------
   THIS IS THE ONE FILE TO EDIT TO RE-BRAND THE WHOLE SITE.

   Change a value here and it changes everywhere — every page,
   every button, every heading. Nothing else needs touching.

   Loaded before style.css and pages.css on every page.
   ============================================================ */


/* ------------------------------------------------------------
   1. FONTS — the actual font files
   ------------------------------------------------------------
   The font files live in  public/fonts/  and are served from our
   own server (no Google Fonts, no third-party request — that is
   what keeps the site fast on mobile data).

   To swap a font: drop the new .woff2 into public/fonts/, change
   the file name in the matching src: url(...) line below, then
   change the matching --font-* name in section 3.
   ------------------------------------------------------------ */

/* Headline font — Archivo Variable (we use the "expanded" widths) */
@font-face {
  font-family: 'Archivo Var';
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Body font — Inter, three weights */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* Technical / label font — IBM Plex Mono, three weights.
   This is the font on every small UPPERCASE LABEL on the site. */
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }


/* ------------------------------------------------------------
   2 & 3. THE TOKENS
   ------------------------------------------------------------ */
:root {

  /* --- COLOURS ------------------------------------------------
     The brand is deliberately almost monochrome with exactly ONE
     accent colour. Every orange thing on the site — headline
     highlights, kickers, buttons, the HUD, the timeline dots —
     comes from --ct-red. Change that single line to re-accent the
     entire website.                                              */

  --ct-black:    #111111;   /* Night Black — page background, dark surfaces      */
  --ct-graphite: #23262B;   /* Graphite — cards, spec tiles, raised panels       */
  --ct-grey:     #ECECEC;   /* Cool Grey — muted light text, form field text     */
  --ct-white:    #FFFFFF;   /* White — primary text on dark                      */
  --ct-red:      #FF5A1F;   /* Energy Orange — THE ACCENT. Used alone, never
                               alongside a second accent colour.                 */

  /* Hairline rules and borders. It is a translucent white so it
     sits correctly on top of photography and video. The light
     theme flips it to translucent black at the bottom of this file. */
  --line: rgba(255,255,255,0.14);


  /* --- TYPEFACES ----------------------------------------------
     Three roles, three fonts. If you change a name here, change
     the matching @font-face in section 1 above.                  */

  --font-head: 'Archivo Var', 'Arial Narrow', sans-serif;  /* big display headlines */
  --font-body: 'Inter', system-ui, sans-serif;             /* paragraphs, cards     */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;   /* small caps labels,
                                                              numbers, the HUD      */

  /* --- SHAPE ---------------------------------------------------
     The 45-degree corner cut that appears on cards, buttons, the
     HUD panel and media frames. Raise it for a more aggressive
     cut, set it to 0px for plain square corners.                 */

  --chamfer: 18px;

  /* --- SPACING -------------------------------------------------
     --gutter is the left/right page margin used by every full
     width section on every page. It grows with the viewport but
     never drops below 60px on desktop.

     --hud-w is the width of the fixed instrument-cluster strip on
     the right edge of the homepage. Sections add it to their
     right padding so text never slides under the HUD, so changing
     it re-flows the homepage correctly. It shrinks on smaller
     screens (see style.css media queries).                       */

  --gutter: max(6vw, 60px);
  --hud-w: 92px;
}


/* ------------------------------------------------------------
   4. LIGHT THEME TOKEN OVERRIDES
   ------------------------------------------------------------
   Set when the visitor presses the sun/moon button in the top bar.
   Only tokens live here — the full light-theme surface colours are
   at the bottom of style.css.
   ------------------------------------------------------------ */
html[data-theme="light"] {
  --line: rgba(0,0,0,0.12);   /* hairlines become dark on light paper */
}