/* Africa CDC Design System v2.2 — semantic tokens.
   Layouts reference this file only. Primitives are documented in tokens.json
   and must never be used directly in a layout.
   Contrast measured 2026-08-13. */

:root {
  --surface-page: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F7F6F3;
  --surface-emphasis: #1A5632;
  --text-primary: #53575A;
  --text-secondary: #6B6F72;
  --text-heading: #9F2241;
  --text-emphasis: #1A5632;
  --text-on-emphasis: #FFFFFF;
  --action-primary: #9F2241;
  --action-hover: #862038;
  --focus-ring: #194F90;
  --status-critical: #AE1857;
  --status-warning: #FFB71B;
  --status-stable: #1A5632;
  --status-unknown: #4E6F87;
  --border-hairline: #E4E2DC;

  /* The ramp is per-theme. The plot plate inverts from near-white to the darkest
     surface in the system, so a single theme-invariant ramp can only ever be
     measured against one of them. Every value clears 3:1 against ITS OWN plate.
     Marks are separated by hue, not luminance; the 3:1 floor is against the
     plate, not between adjacent marks. */
  --chart-1: #194F90; --chart-2: #B38013; --chart-3: #009383;
  --chart-4: #AE1857; --chart-5: #5B7E96; --chart-6: #ED5631;

  --density-unit: 8px;
  --text-body-size: 14px;

  --font-display: 'Univers', 'Encode Sans', Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --watermark-ink: #12211A;
  --radius-panel: 4px;
  --radius-button: 8px;
  --shadow-max: 0 4px 12px rgba(30,30,30,0.08);
  --motion-duration: 160ms;
  --motion-easing: ease;
}

[data-theme="dark"] {
  --surface-page: #12211A;
  --surface-raised: #1B2E25;
  --surface-sunken: #0C1712;
  --surface-emphasis: #1A5632;
  --text-primary: #D7DBD7;
  --text-secondary: #9BA29D;
  --text-heading: #E890A4;
  --text-emphasis: #5FBF87;
  --text-on-emphasis: #FFFFFF;
  --action-primary: #E890A4;
  --action-hover: #F3B3C1;
  --focus-ring: #7FA8DC;
  --status-critical: #F08AAF;
  --status-warning: #FFC94F;
  --status-stable: #5FBF87;
  --status-unknown: #8FAEC2;
  --border-hairline: #526F61;
  --watermark-ink: #FFFFFF;

  --chart-1: #3C69A1; --chart-2: #FFB71B; --chart-3: #009383;
  --chart-4: #B8346B; --chart-5: #5B7E96; --chart-6: #FF5C35;
}

[data-density="briefing"] {
  --density-unit: 12px;
  --text-body-size: 24px;
}

/* Field tier. Photocopy-safe: tone alone is not relied on, every fill
   also carries a hatch. Applied when the mono theme is set, and when
   printing in monochrome.
   A selector list cannot contain an at-rule: `[data-theme="mono"], @media ...`
   is an invalid prelude and the whole rule is dropped, taking the attribute
   theme down with it. The two triggers are declared separately. */
[data-theme="mono"] {
  --surface-page: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #FFFFFF;
  --surface-emphasis: #000000;
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-heading: #000000;
  --text-emphasis: #000000;
  --text-on-emphasis: #FFFFFF;
  --action-primary: #000000;
  --border-hairline: #000000;
  --watermark-ink: #000000;
}

@media print and (monochrome) {
  :root {
    --surface-page: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-sunken: #FFFFFF;
    --surface-emphasis: #000000;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-heading: #000000;
    --text-emphasis: #000000;
    --text-on-emphasis: #FFFFFF;
    --action-primary: #000000;
    --border-hairline: #000000;
    --watermark-ink: #000000;
  }
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}