:root{--font-body:system-ui,sans-serif;--color-ink:#17212b;--color-background:#f6f3ed;--color-focus:#b55718;--radius-control:8px;--space-section:32px}

/* SMG brand tokens.
   Source: the SMG design reference (SMG-English-Landing-Page (2).html, :root block)
   cross-checked against DESIGN.md colour and typography rules.
   Additive on purpose: the starter homepage keeps its own --color-* tokens. */
:root{
  --smg-navy:#0A2342;        /* brand navy: dark sections, footer, large headings */
  --smg-blue:#1D4F91;        /* technical blue: buttons, links, labels, charts */
  --smg-red:#D71920;         /* accent red: CTA only, kept to a small share of the page */
  --smg-navy-strong:#081B34; /* pressed/hover shade of navy */
  --smg-blue-strong:#17417A; /* pressed/hover shade of blue */
  --smg-red-strong:#B91419;  /* pressed/hover shade of red */
  --smg-soft-strong:#EDF1F5; /* hover surface on light backgrounds */
  --smg-ink:#17212B;
  --smg-body:#4B5563;
  --smg-muted:#7C8794;
  --smg-line:#E5E7EB;
  --smg-field:#D8DEE6;       /* form control border */
  --smg-soft:#F6F8FA;
  --smg-white:#FFFFFF;
  --smg-dark-body:#BFD0E2;   /* body copy on navy */
  --smg-dark-muted:#91A7BD;  /* secondary copy on navy */
  --smg-max:1360px;
  --smg-font:"Inter","Helvetica Neue",Arial,sans-serif;
  --smg-radius-btn:7px;
  --smg-radius-card:10px;
  --smg-radius-media:6px;
  --smg-shadow:0 6px 24px rgba(0,0,0,.06);
  --smg-section:118px;       /* vertical rhythm between sections */
  --smg-placeholder:#E7EAEE; /* neutral grey for placeholder media blocks */
  --smg-placeholder-ink:#8A939E;
  --smg-accent-soft:#D8E6F4;  /* emphasised words in a navy headline (design reference hero tint) */
}