/* Bernage brand system — tokens, type and shared components.
   Source: Bernage Brand Pack v1.0 (Bernage-Brand-Guidelines.html).
   Ink + paper carry the brand; petrol is the primary accent (links, quiet
   emphasis); signal amber is reserved for CTAs and highlights that need to
   raise their voice. Manrope self-hosted — no external requests. */

@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root{
  /* core brand tokens */
  --ink:#141414;
  --paper:#f4f4f4;
  --canvas:#e7e7e7;
  --petrol:#14424a;      /* primary accent */
  --petrol-100:#d5ddde;
  --petrol-300:#859da1;
  --petrol-700:#0d2c31;
  --petrol-900:#081a1e;
  --petrol-tint:#e8f0f0;
  --signal:#f59e0b;      /* secondary accent — CTAs, highlights */
  --signal-100:#fdeed3;
  --signal-300:#facd80;
  --signal-700:#a26807;
  --signal-900:#623f04;
  --signal-tint:#fdf1da;
  --g900:#1c1c1c; --g700:#404040; --g500:#767676; --g300:#c9c9c9; --g150:#dcdcdc; --g80:#ededed;

  /* legacy aliases used across the pages (previous teal skin) */
  --accent:var(--petrol);
  --accent-soft:var(--petrol-300);
  --stone:var(--petrol-tint);
  --line:var(--petrol-100);
  --muted:var(--g500);
  --bg:var(--paper);
  --radius:12px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

body{font-family:var(--font);color:var(--ink);background:var(--paper)}

h1,h2,h3{font-weight:800;letter-spacing:-0.02em}

/* caption / eyebrow style: 600 weight, wide tracking */
.eyebrow{font-weight:600;letter-spacing:.14em;color:var(--petrol)}

a{color:var(--petrol)}

/* buttons: petrol by default; .btn.signal for the CTAs that raise their voice */
.btn{background:var(--petrol);color:#fff;font-weight:700}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;color:var(--petrol);border:1.5px solid var(--petrol)}
.btn.signal{background:var(--signal);color:var(--ink)}
.btn.signal:hover{filter:brightness(1.06)}

/* vada lockup (inline SVG: amber arches + wordmark in currentColor) */
.lockup{display:inline-flex;align-items:center;color:var(--petrol)}
.lockup svg{height:30px;width:auto;flex:none}
.lockup.on-ink{color:var(--paper)}

/* attribution rows (developed by Bernage / recommended by SABA) */
.attrib{display:flex;align-items:center;gap:9px;font-size:.85rem}
.attrib svg,.attrib img{width:20px;height:20px;flex:none}

/* Document control line on the published legal pages (terms, privacy,
   licence-terms, dpa) — ONE shared class so the four formats cannot drift
   apart again. Format per the Legal Document Register's Conventions tab:
   "Document ID VADA-XXX · Version X.Y · Effective D Month YYYY · In force",
   dates always spelled out (read in Belgium AND Tanzania - numeric date
   order differs). Second .doc-control line only where a document
   supersedes something. */
.doc-control{color:var(--muted);font-size:.9rem;margin:0 0 4px;font-variant-numeric:tabular-nums}
.doc-control+.doc-control{margin:0 0 4px}
.doc-control+p.updated,.doc-control+p:not(.doc-control){margin-top:10px}