/* =============================================================
   PDM Pillar 3 Results Centre — Design tokens
   Source of truth for colour, type, space, elevation and motion.
   Data-viz palettes below were validated with the dataviz
   validator (OKLab CVD ΔE, chroma floor, contrast) — see
   README.md § Design system before changing any --viz-* value.
   ============================================================= */

:root {
  color-scheme: light;

  /* ---- Brand -------------------------------------------------- */
  --brand-primary:      #94040F;  /* Uganda flag red, deepened for text contrast */
  --brand-primary-ink:  #7A030C;  /* hover / pressed */
  --brand-primary-wash: #FDF3F4;  /* tint behind active menu items */
  --brand-accent:       #FCD116;  /* Uganda flag gold */
  --brand-accent-ink:   #8A6B00;
  --brand-black:        #1A1A1A;

  /* ---- Partner brand: WENDI ------------------------------------------
     Pearl Bank's wallet, not a PDM colour. --brand-wendi is sampled from
     wendi-logo.png and is decorative only: white text on it reaches just
     3.4:1. --brand-wendi-deep is the same hue scaled to 75%, where white
     copy clears 5.5:1; it paints the WENDI surfaces on the Systems page.
     Neither is ever used as a data colour. ------------------------------ */
  --brand-wendi:      #F15A28;
  --brand-wendi-deep: #B5431E;

  /* ---- Surfaces ---------------------------------------------------
     The page plane is a warm neutral, not a cream: the earlier #FAF7EF
     read as yellowed paper on text-only pages (changed 2026-09-14 at the
     client's request). Sunken, wash and the lines below share its hue at
     the same low chroma so white cards stay crisp against it. --------- */
  --surface-page:   #F4F3EF;  /* page plane */
  --surface-raised: #FFFFFF;  /* cards, tables, nav */
  --surface-sunken: #EDECE7;  /* table headers, inset panels */
  --surface-wash:   #E8E7E2;  /* progress track, chips */
  --surface-hover:  #FAFAF8;
  --surface-dark:   #1F2430;  /* footer */

  /* The ground under a Story of Change. It is the sequential ramp's own
     darkest step -- PDM green, the D of the logo -- borrowed here as a
     surface rather than as a magnitude, at the client's instruction
     (2026-09-20): the footer's navy is chrome, and what a story reports is
     a household that grew. Green carries that in this palette already; see
     the note on the ramp below. White on it is 7.8:1 and the flag gold
     5.3:1, so the opener's headline, its quotation and its eyebrow all
     clear AA. It is never used as a data colour. */
  --surface-story:  #0E5F30;

  /* ---- Ink ---------------------------------------------------- */
  --ink-primary:   #1B1B1B;
  --ink-secondary: #5B5B5B;
  --ink-muted:     #8A8A8A;
  --ink-inverse:   #FFFFFF;

  /* ---- Lines -------------------------------------------------- */
  --line-hairline: #E5E3DE;
  --line-soft:     #EEEDE9;
  --line-strong:   #D9D7D0;

  /* ---- Performance bands (status palette — fixed, never themed)
     Every band is rendered with a glyph AND a text label, so meaning
     is never carried by hue alone. ------------------------------- */
  --band-ontrack: #1F8A4C;
  --band-lagging: #D9720C;
  --band-atrisk:  #A32334;

  /* ---- Categorical: pillar components A–F ---------------------
     Fixed order. Validated adjacent-pair: worst CVD ΔE 18.8,
     normal-vision ΔE 23.7, all ≥3:1 on white. ------------------- */
  --comp-a: #A32334;
  --comp-b: #B8860B;
  --comp-c: #2F6FCF;
  --comp-d: #1F8A4C;
  --comp-e: #7B4FC9;
  --comp-f: #D9720C;

  /* ---- Categorical: the four regions -------------------------
     The four colours of the PDM logo: the gold and red of the flag
     stripe, the teal of the seedling and the green of the D. Green and
     teal sit close for some colour-blind readers, so the region name is
     always printed alongside the colour — never colour alone. Gold is
     too pale for white text or for text on white: marks carrying it take
     dark ink, and figures in a region's colour use the -ink variant. */
  --logo-green: #20A25C;
  --logo-teal:  #1E8B85;
  --logo-gold:  #FBD11D;
  --logo-red:   #EF2920;

  --region-central:  #F2BE0F;
  --region-eastern:  #E0301F;
  --region-northern: #1E8B85;
  --region-western:  #20A25C;

  --region-central-ink:  #8A6B00;
  --region-eastern-ink:  #B3241A;
  --region-northern-ink: #16706B;
  --region-western-ink:  #17804A;

  /* ---- Sequential ramp (single hue, monotone lightness) --------
     PDM green, the D of the logo. Used for magnitude-shaded surfaces:
     the reach maps, the results mosaic and their legends. Darker means
     more, and green reads as growth; maroon is kept for the brand and
     the at-risk band so a dark map never looks like a warning. Steps
     1–5 take dark ink, 6–7 white (step 5 is 3.3:1 against white). */
  --seq-1: #E4F2E7;
  --seq-2: #C4E4CC;
  --seq-3: #9CD2A9;
  --seq-4: #6DBB82;
  --seq-5: #419F60;
  --seq-6: #228245;
  --seq-7: #0E5F30;

  /* Land under a count layer on the results map: uniform, so no reader
     mistakes the size of a district for the size of its figure. */
  --map-land: #EAF3EC;

  /* ---- Chart chrome ------------------------------------------- */
  --viz-series:     #A32334;  /* single-series bars */
  --viz-reach:      #228245;  /* reach meters beside the map; ramp step 6 */
  --viz-track:      #E8E7E2;
  --viz-grid:       #E5E3DE;
  --viz-axis:       #CDCBC4;
  --viz-label:      #5B5B5B;

  /* ---- SACCO profile header ----------------------------------------
     The band behind a SACCO mark, and the disc the initials sit on.
     Both are the PDM logo's own teal, bucketed out of assets/pdm-logo.png
     rather than matched by eye: #1F8B85 is the logo's second-largest ink
     after the black of the wordmark, and #145C58 is that same teal at
     66%, where white initials clear 7.8:1 on it.

     One colour for every SACCO: the band used to take the region's hue,
     which put four unlabelled colours on the page carrying information no
     reader could decode -- against this portal's own rule that identity
     never rests on colour. The mark sits on the band in a deeper tone of
     the same hue, separated by the white ring rather than by a second
     colour. */
  --profile-band: #1F8B85;
  --profile-mark: #145C58;

  /* ---- Accent hues used for KPI identity ---------------------- */
  --kpi-teal:   #0E7C86;
  --kpi-orange: #D9720C;
  --kpi-green:  #1F8A4C;
  --kpi-blue:   #2F6FCF;
  --kpi-violet: #7B4FC9;
  --kpi-red:    #A32334;

  /* The same six as a fill under white caps text, on the home strip's label
     bars. White on the raw ink is 3.30:1 on orange and 4.38:1 on green, both
     short of the 4.5:1 WCAG 1.4.3 asks of small text, so those two step down
     the same hue until they clear it -- orange to 82% (4.71:1), green to 97%
     (4.60:1). The other four already pass and are left exactly as they are,
     so the bar and the figure above it read as one colour: teal 4.95, blue
     4.89, violet 5.52, red 7.38. */
  --kpi-teal-fill:   #0E7C86;
  --kpi-orange-fill: #B25D0A;
  --kpi-green-fill:  #1E864A;
  --kpi-blue-fill:   #2F6FCF;
  --kpi-violet-fill: #7B4FC9;
  --kpi-red-fill:    #A32334;

  /* ---- Type --------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: 0.75rem;    /* 12px  captions, meta */
  --step-0:  0.8125rem;  /* 13px  body small — the portal's workhorse */
  --step-1:  0.875rem;   /* 14px  body */
  --step-2:  1rem;       /* 16px  lead */
  --step-3:  1.1875rem;  /* 19px  card titles */
  --step-4:  1.375rem;   /* 22px  section headings */
  --step-5:  1.75rem;    /* 28px  page titles */
  --step-6:  2.125rem;   /* 34px  stat figures */
  --step-7:  clamp(2rem, 1.2rem + 3.6vw, 3.25rem); /* hero */

  /* ---- Space (4px base) ---------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-7: 2rem;     --space-8: 2.75rem;  --space-9: 4rem;

  /* ---- Radius -------------------------------------------------- */
  --radius-sm: 6px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 14px; --radius-2xl: 16px; --radius-pill: 999px;

  /* ---- Elevation ----------------------------------------------- */
  --shadow-1: 0 2px 10px rgba(27, 27, 27, 0.05);
  --shadow-2: 0 3px 14px rgba(27, 27, 27, 0.06);
  --shadow-3: 0 6px 18px rgba(27, 27, 27, 0.10);
  --shadow-4: 0 12px 28px rgba(27, 27, 27, 0.14);
  --shadow-5: 0 20px 44px rgba(0, 0, 0, 0.22);

  /* ---- Motion --------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 1600ms;

  /* ---- Layout --------------------------------------------------- */
  --shell-max: 1440px;
  --shell-pad: clamp(1rem, 0.4rem + 2vw, 2rem);
  --nav-height: 68px;
  --focus-ring: 0 0 0 3px rgba(148, 4, 15, 0.28);
}

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