/* ===========================================================================
   PASGR AYPS Platform — brand tokens
   Source of truth: ../BRAND_GUIDE.md

   PALETTE PROVENANCE (revised 2026-08-04). These values are PASGR's own, taken
   from pasgr.org two ways that agree: the hex values the page declares, and
   pixel sampling of the rendered page converted out of the display profile into
   sRGB. They REPLACE an earlier palette sampled from the logo artwork, which was
   a colder, greener olive (#4A5E1A) and a redder orange (#FF4221) than anything
   PASGR actually paints.

   The print artefacts built before this date — ENUMERATOR_TRAINING/CONSENT and
   IDENTITY_CARD — still carry the logo-artwork values. They were produced and
   used for the July 2026 Uganda training, so they are a record rather than a
   live asset; anything reprinted should be rebuilt from these tokens.

   TWO ORANGES, AND THE REASON. Every orange PASGR uses measures below 4.5:1 on
   white, so none can carry normal-size text. That is fine on pasgr.org, which is
   headlines and large panels; it is not fine on a platform of tables, 14px links
   and field tablets in daylight. So the orange is split by role, exactly as the
   CEGER platform splits its greens: --primary is a deep step that carries text,
   --accent is PASGR's true orange doing everything it does on their own site.
   Never use --accent for text or for a control's label.

   Import once in the base template. Components reference tokens only —
   never hard-code a hex.
   =========================================================================== */

:root {
  /* ---- Core brand (fixed; do not tint per theme) ------------------------- */
  --pasgr-olive-core: #605F37;   /* every large field on pasgr.org (9 declarations) */
  --pasgr-orange-core: #F1592D;  /* PASGR's primary orange (8 declarations) */
  --pasgr-coral: #FD4A36;        /* small round controls, nav links on pasgr.org */
  --mcf-red: #EB011A;            /* Mastercard Foundation */
  --mcf-amber: #F79E1C;          /* Mastercard Foundation */

  /* ---- Theme-aware brand (lightened in dark mode) ------------------------ */
  --pasgr-olive: #605F37;
  --pasgr-orange: #F1592D;

  /* ---- Interface roles --------------------------------------------------- */
  /* --primary carries TEXT: links, headings, the label on a filled button.
     --accent is PASGR's orange and carries no text ever. Keeping the two apart
     is what lets the interface read as orange without failing contrast. */
  --primary: #B0390D;        /* 6.11:1 on white */
  --primary-hover: #98300A;  /* 7.60:1 — hover DARKENS; brightening would fail */
  --primary-tint: #FBE8E2;   /* selected rows, active tabs */
  --accent: #F1592D;         /* rule, discs, focus ring, large fills */

  /* ---- Olive ramp -------------------------------------------------------- */
  --olive-900: #38371F;
  --olive-700: #605F37;
  --olive-500: #838249;
  --olive-100: #F0F0E4;

  /* ---- Surfaces & text --------------------------------------------------- */
  --paper: #FFFFFF;
  --surface: #FAFAFA;
  --border: #E4E4DC;
  --ink: #2B2728;
  --muted: #85857A;

  /* ---- State (deliberately distinct from brand colours) ------------------ */
  --success: #2E7D4F;
  --warning: #B26A00;
  --danger: #B3261E;
  --info: #2A5C8A;

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Avenir Next", "Helvetica Neue", Inter, system-ui, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: 2rem;    /* 32px */
  --t-h1: 1.625rem;     /* 26px */
  --t-h2: 1.25rem;      /* 20px */
  --t-h3: 1.0625rem;    /* 17px */
  --t-body: 1rem;       /* 16px */
  --t-small: 0.875rem;  /* 14px */
  --t-label: 0.6875rem; /* 11px */

  /* ---- Shape ------------------------------------------------------------- */
  --radius-card: 6px;
  --radius-control: 4px;
  --radius-pill: 999px;
  --elevation: 0 1px 3px rgba(0, 0, 0, .10);
  --rule-h: 4px;        /* four-colour rule, masthead */
  --rule-h-foot: 6px;   /* four-colour rule, page foot */

  /* ---- Data-visualisation: categorical (one per AYPS country) ------------ */
  --cat-1: #605F37;  --cat-2: #2A7F8F;  --cat-3: #C25E00;  --cat-4: #3E5C9A;
  --cat-5: #A8901F;  --cat-6: #8C5A9E;  --cat-7: #838249;  --cat-8: #B3496B;
  --cat-9: #4E7B5E;  --cat-10: #7A6A5D;

  /* ---- Data-visualisation: sequential (single-hue olive) ----------------- */
  --seq-1: #F0F0E4;  --seq-2: #D8D8CA;  --seq-3: #BDBC9E;  --seq-4: #A5A36F;
  --seq-5: #82804A;  --seq-6: #605F37;  --seq-7: #38371F;

  /* ---- Data-visualisation: diverging (gaps: under ← neutral → over) ------ */
  --div-neg-2: #B3261E; --div-neg-1: #E08A6C; --div-mid: #F2E4D8;
  --div-pos-1: #9FBDA8; --div-pos-2: #2E7D4F;

  /* ---- Country accents (draft — confirm with PASGR) ---------------------- */
  --country-ug: #605F37;  --country-ke: #38371F;  --country-ng: #2E7D4F;
  --country-gh: #A8901F;  --country-et: #C25E00;  --country-rw: #2A7F8F;
  --country-sn: #3E5C9A;  --country-bj: #8C5A9E;  --country-tg: #B3496B;
  --country-ci: #7A6A5D;
}

/* ---- One theme, and it is light ------------------------------------------
   There WAS a dark theme here, auto-selected by `prefers-color-scheme`. It is
   removed, on the PM's judgement after seeing it: its ground was #191A16, a
   warm near-black with a green cast, and PASGR olive against it read as murky
   rather than as brand.

   Two things made removing it the right call rather than a retreat. There was
   never a toggle in the interface, so nobody could choose it — an operating
   system preference decided, and a country team that never asked for a dark
   platform got one. And the product this platform is modelled on,
   training.ceger.org, is light-only: a white card on a near-white ground with
   a coloured edge. Matching it is the point.

   The light values below are the whole palette now. If a dark theme is ever
   wanted it needs a toggle, its own contrast pass, and a look at olive on dark
   specifically — it is the colour that suffered.
   -------------------------------------------------------------------------- */

/* ===========================================================================
   Devices — BRAND_GUIDE §3
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DIRECTION RULE (BRAND_GUIDE §10, CRS FR-I18N-012)
   Layout below uses CSS LOGICAL PROPERTIES ONLY — inline-start/inline-end,
   never physical left/right. A CI lint rule enforces this. It is what makes
   RTL nearly free; retrofitted, it is a rewrite of every stylesheet.
   --------------------------------------------------------------------------- */

/* §3.1 The four-colour rule. Order and proportion are fixed relative to the
   READING EDGE: `row` in LTR, `row-reverse` in RTL, so PASGR's 3-unit olive
   always leads from where the eye starts. */
.pasgr-rule {
  display: flex;
  flex-direction: row;
  height: var(--rule-h);
  width: 100%;
  /* keep the funder colours true even in dark mode */
  --rule-olive: var(--pasgr-olive-core);
}
[dir="rtl"] .pasgr-rule { flex-direction: row-reverse; }
.pasgr-rule > i { flex: 1; display: block; }
.pasgr-rule > i:nth-child(1) { background: var(--rule-olive); flex: 3; }
.pasgr-rule > i:nth-child(2) { background: var(--pasgr-orange-core); }
.pasgr-rule > i:nth-child(3) { background: var(--mcf-red); }
.pasgr-rule > i:nth-child(4) { background: var(--mcf-amber); }
.pasgr-rule--foot { height: var(--rule-h-foot); }
.pasgr-rule--card { height: 3px; }

/* §3.2 Skewed slivers — overlay for a flat colour band. Never on white.
   The skew flips with direction so the slivers still trail the reading eye. */
.pasgr-band {
  position: relative;
  overflow: hidden;
  background: var(--band-colour, var(--pasgr-olive-core));
  color: #fff;
  --sliver-skew: -20deg;
}
[dir="rtl"] .pasgr-band { --sliver-skew: 20deg; }
.pasgr-band__sliver {
  position: absolute; top: -30%; height: 160%; width: 28px;
  transform: skewX(var(--sliver-skew));
  background: rgba(255, 255, 255, .16);
  pointer-events: none;
}
.pasgr-band__sliver:nth-of-type(1) { inset-inline-start: 12px; }
.pasgr-band__sliver:nth-of-type(2) { inset-inline-start: 44px; width: 15px; background: rgba(255,255,255,.28); }
.pasgr-band__sliver:nth-of-type(3) { inset-inline-start: 68px; width: 8px;  background: rgba(255,255,255,.14); }

/* §3.3 Overlapping discs — dark olive panels only. Moves to the leading
   top corner, which is top-right in LTR and top-left in RTL. */
.pasgr-discs {
  position: absolute; top: -90px; inset-inline-end: -70px;
  width: 270px; height: 190px; pointer-events: none;
}
.pasgr-discs > span {
  position: absolute; top: 0; width: 170px; height: 170px;
  border-radius: 50%; border: 3px solid;
}
.pasgr-discs > span:nth-child(1) { inset-inline-start: 0;    border-color: rgba(241, 89, 45, .42); }
.pasgr-discs > span:nth-child(2) { inset-inline-start: 85px; border-color: rgba(247, 158, 28, .62); }

/* §3.4 Circular section numeral */
.pasgr-num {
  display: inline-block; min-width: 1.55em; height: 1.55em; line-height: 1.55em;
  text-align: center; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: .8em; font-weight: 700; margin-inline-end: .5em;
}

/* Directional icons mirror; non-directional ones must opt out with .no-mirror
   (BRAND_GUIDE §10.2 — logos, photos, clocks and numbers never flip). */
[dir="rtl"] .icon-directional:not(.no-mirror) { transform: scaleX(-1); }

/* §3.4 Chip / pill */
.pasgr-chip {
  display: inline-block; padding: .18em .8em;
  border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--primary)); color: var(--chip-ink, #fff);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
/* Amber and other light fills always take dark ink — BRAND_GUIDE §2.4 */
.pasgr-chip--amber { --chip-bg: var(--mcf-amber); --chip-ink: var(--ink); }
.pasgr-chip--orange { --chip-bg: var(--primary); --chip-ink: #fff; }

/* §3.5 Callout — the orange edge sits on the READING edge, not the physical left */
.pasgr-callout {
  background: var(--surface);
  border-inline-start: 4px solid var(--accent);
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  padding: .7rem 1rem;
}

/* §3.5 Card */
.pasgr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation);
}

/* §3.5 Section heading */
.pasgr-h2 {
  font-size: var(--t-h2); font-weight: 700; color: var(--primary);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: .25rem; margin: 1.4rem 0 .6rem;
}

/* Country accent band — set --band-colour from the country's token */
.pasgr-country-band { height: 6px; background: var(--band-colour, var(--pasgr-olive)); }

/* ---- Print --------------------------------------------------------------- */
@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #2B2728; }
  .pasgr-rule, .pasgr-band, .pasgr-chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}