/*
  WaveX Media — Theme (design tokens)
  Source of truth: docs/brand.md — this file is a direct translation of it into code.
  Do not hardcode a colour, font, or spacing value anywhere else in the codebase —
  always reference one of the custom properties below instead.
*/

/* Self-hosted fonts — Archivo, IBM Plex Sans, Domine (all variable fonts,
   one file per family covers the full weight range used on this site). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/Bitter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/Bitter-Italic-Variable.woff2") format("woff2");
}

:root {
  /* Light-only site. This opts the page out of mobile browsers' automatic
     "force dark" inversion (Chrome Android, Samsung Internet, etc.), which
     crudely darkens light sites that don't declare a scheme — it made the
     site look wrong on a real phone at night (2026-07-23). The site has no
     designed dark theme; this keeps it in its intended light palette at all
     times. Paired with <meta name="color-scheme" content="light"> in each
     page head, which is read before CSS loads (prevents a dark flash). */
  color-scheme: only light;

  /* Identity colours */
  --color-navy: #1B3A5C;        /* Hero register anchor — full-bleed backgrounds, hero section bands */
  --color-paper: #E9EDEA;       /* Editorial register base — cool, not warm cream */
  --color-pine: #1F4B3D;        /* Editorial signal/accent — eyebrows, dividers, stat-number colour, editorial links */
  --color-grey: #DEE4E9;        /* Shared soft neutral — secondary borders, quiet dividers */
  --color-black: #14181D;       /* Deliberate accent band ONLY — e.g. footer. Never the base theme. */
  --color-cta: #CC5B3B;         /* THE ONE call-to-action colour. Must appear nowhere else in the UI. */

  /* Text & surface */
  --color-white: #FAFBFC;       /* Near-white — hero register text, text on --color-cta, text on --color-black */
  --color-ink: #181B19;         /* Editorial register heading text */
  --color-muted-ink: #4B4F4B;   /* Editorial register body/secondary text */
  --color-hero-accent: #BFD6E4; /* Hero register eyebrow labels AND inline links */

  /* Utility */
  --color-border: rgba(24, 27, 25, 0.12);  /* Subtle dividers/card borders, works on --color-paper and white */
  --color-error: #C0392B;                  /* Form validation only (not currently used — no forms on this site) */

  /* Typography */
  --font-headline: "Archivo", sans-serif;    /* Headline role — both registers, two intensities */
  --font-body: "IBM Plex Sans", sans-serif;  /* Body copy, UI, eyebrows/labels, buttons */
  --font-accent: "Bitter", serif;            /* Earned accent ONLY — stat numerals and pull-quotes */

  /* Type scale — desktop. Pages override to the mobile values below the relevant breakpoint. */
  --text-hero-h1: 56px;
  --text-h2: 34px;
  --text-h3: 24px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-caption: 13px;
  --text-eyebrow: 12px;
  --text-stat: 48px;
  --text-quote: 22px;

  /* Type scale — mobile */
  --text-hero-h1-mobile: 34px;
  --text-h2-mobile: 26px;
  --text-h3-mobile: 20px;
  --text-body-lg-mobile: 16px;
  --text-stat-mobile: 32px;
  --text-quote-mobile: 19px;

  /* Spacing — base unit 8px, fixed scale only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1280px;
}