/* ===========================================================================
   PASGR AYPS Platform — brand tokens
   Source of truth: ../BRAND_GUIDE.md
   Palette sampled from the PASGR / Mastercard Foundation logo artwork; identical
   to the values used in ENUMERATOR_TRAINING/CONSENT/DESIGN/build_consent_form.py
   and IDENTITY_CARD/build_id_cards.py, so screen and print cannot drift.

   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: #4A5E1A;   /* PASGR wordmark */
  --pasgr-orange-core: #FF4221;  /* PASGR Africa mark / tagline */
  --mcf-red: #EB011A;            /* Mastercard Foundation */
  --mcf-amber: #F79E1C;          /* Mastercard Foundation */

  /* ---- Theme-aware brand (lightened in dark mode) ------------------------ */
  --pasgr-olive: #4A5E1A;
  --pasgr-orange: #FF4221;

  /* ---- Olive ramp -------------------------------------------------------- */
  --olive-900: #33420F;
  --olive-700: #4A5E1A;
  --olive-500: #6C8329;
  --olive-100: #EEF1E4;

  /* ---- Surfaces & text --------------------------------------------------- */
  --paper: #FFFFFF;
  --surface: #FAFAF6;
  --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: #4A5E1A;  --cat-2: #2A7F8F;  --cat-3: #C25E00;  --cat-4: #3E5C9A;
  --cat-5: #A8901F;  --cat-6: #8C5A9E;  --cat-7: #6C8329;  --cat-8: #B3496B;
  --cat-9: #4E7B5E;  --cat-10: #7A6A5D;

  /* ---- Data-visualisation: sequential (single-hue olive) ----------------- */
  --seq-1: #EEF1E4;  --seq-2: #D2DCB4;  --seq-3: #AFC183;  --seq-4: #8AA455;
  --seq-5: #6C8329;  --seq-6: #4A5E1A;  --seq-7: #33420F;

  /* ---- 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: #4A5E1A;  --country-ke: #33420F;  --country-ng: #2E7D4F;
  --country-gh: #A8901F;  --country-et: #C25E00;  --country-rw: #2A7F8F;
  --country-sn: #3E5C9A;  --country-bj: #8C5A9E;  --country-tg: #B3496B;
  --country-ci: #7A6A5D;
}

/* ---- Dark theme ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191A16;
    --surface: #22241E;
    --border: #383A31;
    --ink: #EDEDE5;
    --muted: #9A9A8E;
    --pasgr-olive: #8FA855;
    --pasgr-orange: #FF6A4D;
    --olive-100: #2C3122;
    --elevation: 0 1px 3px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --paper: #191A16;
  --surface: #22241E;
  --border: #383A31;
  --ink: #EDEDE5;
  --muted: #9A9A8E;
  --pasgr-olive: #8FA855;
  --pasgr-orange: #FF6A4D;
  --olive-100: #2C3122;
  --elevation: 0 1px 3px rgba(0, 0, 0, .5);
}
:root[data-theme="light"] {
  --paper: #FFFFFF;
  --surface: #FAFAF6;
  --border: #E4E4DC;
  --ink: #2B2728;
  --muted: #85857A;
  --pasgr-olive: #4A5E1A;
  --pasgr-orange: #FF4221;
  --olive-100: #EEF1E4;
  --elevation: 0 1px 3px rgba(0, 0, 0, .10);
}

/* ===========================================================================
   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(255, 66, 33, .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(--pasgr-olive); 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(--pasgr-olive)); 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(--pasgr-orange-core); --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(--pasgr-orange);
  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(--pasgr-olive);
  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;
  }
}