/* ============================================================
   TEL TSI · BRAND DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   ------------------------------------------------------------
   Canonical product theme: Blue × DOSSIER HYBRID (eu-blue-gold).
   EU blue (#004494) primary — the official EU-register look — paired with
   a gold accent (#ffd617) on dark surfaces, blue-tinted paper, and
   soft-rounded corners. Typeface is Arial across the entire
   product. Every surface derives its colours from these tokens —
   do not hard-code hexes elsewhere.

   Token NAMES are kept from the former themes for backward
   compatibility (--amber, --brass, --navy …), so every consumer
   re-skins automatically:
     - --navy / --amber  → EU blue (primary brand + CTAs)
     - --brass / --brass-l → gold accent (on dark surfaces)

   Consumers:
     - src/dossier-marketing.css  (@imports this file)
     - marketing/landing pages    (via dossier-marketing.css)
     - social preview image        (scripts/og-image.html — kept in sync)
     - programmatic use (PDF, etc.) via src/brand-tokens.json (mirror)

   When you change a value here, update src/brand-tokens.json and
   scripts/og-image.html to match.
   ============================================================ */
:root {
  /* ── Core surfaces (EU blue) ───────────────────────────── */
  --navy:    #004494;   /* primary brand / dark surface (EU blue) */
  --navy-d:  #041e42;   /* darkest surface (deep navy)         */
  --steel:   #334155;   /* mid slate                           */

  /* ── Accents ───────────────────────────────────────────── */
  --amber:   #004494;   /* PRIMARY accent → EU blue (CTAs, rules) */
  --amber-d: #003a7a;   /* accent hover (darker blue)          */
  --brass:   #ffd617;   /* gold accent on dark surfaces        */
  --brass-l: #fff4c2;   /* bright gold — accent text on dark   */
  --green:   #4a6d3f;   /* success / positive / live           */

  /* ── Text ──────────────────────────────────────────────── */
  --fg:      #1a2b47;   /* body/strong text on light           */
  --fg2:     #334155;   /* secondary text on light             */
  --muted:   #4a5568;   /* muted text on light                 */
  --cream:   #eaf2fc;   /* text on dark surfaces               */
  --cream-d: #b9d4f0;   /* secondary text on dark              */

  /* ── Lines / paper ─────────────────────────────────────── */
  --line:    #d7e3f0;   /* hairline / border (blue-grey)       */
  --bg:      #f5f8fc;   /* near-white blue paper (page bg)      */
  --panel:   #eaf2fc;   /* pale blue panel                     */

  /* ── Shape ─────────────────────────────────────────────── */
  --radius:  8px;

  /* ── Signature gradient (hero / dark bands) ────────────── */
  --grad-hero: linear-gradient(160deg, #041e42 0%, #004494 50%, #1c6dd0 100%);

  /* ── Hybrid refinements ────────────────────────────────── */
  --card:    #ffffff;   /* raised sheet                                */
  --desk:    #eaf2fc;   /* pale blue desk behind sheets                */
  --accent-ink: #fdf6ec;/* cream text sitting on a blue/gold fill      */
  --red:     #c1533a;   /* fail / breach — oxblood                     */
  --orange:  #d97706;   /* medium risk — amber                         */

  /* ── Typography (Arial is the product-wide default) ────── */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: Arial, monospace;
  --font-serif: Arial, Georgia, "Times New Roman", serif;
}

/* Arial is the default typeface across every surface — no web fonts.
   Individual rules may still override for specific display treatments. */
html, body { font-family: var(--font-sans); }
button, input, select, textarea { font-family: inherit; }