/* =====================================================================
   MOH Brand tokens — single source of truth for every page in the portal.

   Values are taken from the official Ministry of Health Identity
   Guidelines (the PDF Muhannad shared). Pantone codes are kept in
   comments so the file is a self-contained reference.

   How to use:
     1. <link rel="stylesheet" href="css/moh-brand.css">  (BEFORE styles.css)
     2. In your CSS / inline <style>, use var(--moh-green) instead of
        any green hex literal. Same for var(--moh-gold).
     3. For status/accent colors prefer the secondary palette
        (var(--moh-red), var(--moh-orange-yellow), etc.) over inventing
        new ones — they all coexist on-brand.

   See MOH-BRAND.md at the repo root for the full reference.
   ===================================================================== */

:root {
  /* ── Identity primary colors ─────────────────────────────────────── */
  --moh-green:        #008755;   /* Pantone 7725 C */
  --moh-green-90:     rgba(0, 135, 85, 0.9);
  --moh-green-75:     rgba(0, 135, 85, 0.75);
  --moh-green-50:     rgba(0, 135, 85, 0.5);
  --moh-green-30:     rgba(0, 135, 85, 0.3);
  --moh-green-10:     rgba(0, 135, 85, 0.1);

  --moh-gold:         #9B945F;   /* Pantone 451  C */
  --moh-gold-90:      rgba(155, 148, 95, 0.9);
  --moh-gold-75:      rgba(155, 148, 95, 0.75);
  --moh-gold-50:      rgba(155, 148, 95, 0.5);
  --moh-gold-30:      rgba(155, 148, 95, 0.3);
  --moh-gold-10:      rgba(155, 148, 95, 0.1);

  /* ── Identity secondary palette (accents, charts, status) ────────── */
  --moh-yellow:        #F2CD00;  /* Pantone 7405 C */
  --moh-orange-yellow: #F0B323;  /* Pantone 7409 C */
  --moh-orange:        #DC582A;  /* Pantone 7579 C */
  --moh-cyan:          #009ACE;  /* Pantone 801  C */
  --moh-red:           #C8102E;  /* Pantone 186  C */
  --moh-lime:          #D0DF00;  /* Pantone 389  C */
  --moh-grey:          #707372;  /* Pantone 424  C */
  --moh-magenta:       #960051;  /* Pantone 676  C */
  --moh-purple:        #753BBD;  /* Pantone 266  C */
  --moh-teal:          #64CCC9;  /* Pantone 325  C */

  /* ── Typography ──────────────────────────────────────────────────── */
  /* Brand calls for GE SS Unique (advertising) / Hassoub (internal) for
     Arabic, and Helvetica Neue for English. Both Arabic fonts are
     commercial — the portal uses Noto Kufi Arabic / Tajawal as free
     substitutes. The stack below puts the licensed names first so the
     moment they're hosted via @font-face they take over automatically.
     See MOH-BRAND.md "Typography" for the free-substitute rationale. */
  --font-arabic:  'GE SS Unique', 'Hassoub', 'Noto Kufi Arabic', 'Cairo', 'Tajawal', 'Almarai', system-ui, sans-serif;
  --font-english: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* ── Semantic aliases — use these in feature CSS instead of the raw
        palette names so a future palette tweak is one-line. ──────────── */
  --color-primary:      var(--moh-green);
  --color-primary-soft: var(--moh-green-10);
  --color-accent:       var(--moh-gold);
  --color-success:      var(--moh-green);
  --color-warning:      var(--moh-orange-yellow);
  --color-danger:       var(--moh-red);
  --color-info:         var(--moh-cyan);
}

/* Default body font follows document direction — RTL pages get the
   Arabic stack, LTR pages get Helvetica. Page-specific font-family
   overrides on body still win because they're more specific. */
html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="ltr"] body { font-family: var(--font-english); }

/* Logo clear-space helper. The brand requires ≥ 0.5X on all sides of
   the MOH logo (X = half the symbol height). Wrap a logo container in
   <span class="moh-logo-clearspace"> to apply the minimum padding. */
.moh-logo-clearspace { display: inline-block; padding: 0.5em; }

/* Brand-correct status pills — use instead of one-off colored badges.
   The translucent backgrounds keep the brand color visible without
   shouting. Pairs well with the existing .badge class on dashboards. */
.moh-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
}
.moh-pill.success { background: var(--moh-green-10);            color: var(--moh-green); }
.moh-pill.warn    { background: rgba(240, 179, 35, 0.15);       color: #8A5A00;          }
.moh-pill.danger  { background: rgba(200, 16,  46, 0.1);        color: var(--moh-red);   }
.moh-pill.info    { background: rgba(0,   154, 206, 0.1);       color: var(--moh-cyan);  }
.moh-pill.muted   { background: rgba(112, 115, 114, 0.15);      color: var(--moh-grey);  }

/* =====================================================================
   Surface tokens + theme semantics  (added in the site-shell foundation PR)

   These names are READ by feature CSS regardless of theme. The values
   defined here are the LIGHT-mode defaults; css/dark-mode-tokens.css
   rebinds them under [data-theme="dark"] for the dark theme.

   Why some token names overlap with styles.css ( --bg, --card, --shadow,
   --divider, --text… ): the existing styles.css :root values are LIGHT
   defaults and we keep them. dark-mode-tokens.css overrides at a higher
   specificity for the dark theme. That keeps every existing call-site
   (94× var(--text), 39× var(--bg)/var(--card)…) automatically theme-aware.
   ===================================================================== */
:root {
  /* Status semantics — prefer these names in new feature CSS so a brand
     tweak is one-line for every status pill / KPI border / chart fill.   */
  --status-success: var(--moh-green);
  --status-warning: var(--moh-orange-yellow);
  --status-danger:  var(--moh-red);
  --status-info:    var(--moh-cyan);

  /* Gradient stops used by .gradient-header (defined in styles.css).
     In dark mode the "from" stop lifts to the brighter band shade so the
     header still reads as a discrete surface against the dark page bg. */
  --gradient-from: var(--moh-green);
  --gradient-to:   #052e1c;

  /* Text colour for content placed ON the brand gradient (logos, header
     buttons). Stays white in both themes. */
  --text-on-brand: #ffffff;

  /* Surface extras that didn't exist in styles.css (deeper bg behind cards,
     a translucent card-border, a panel surface). Defaults match the
     existing light palette; dark-mode-tokens.css rebinds. */
  --bg-deep:     #F2F4F7;
  --card-border: #E5E7EB;
  --panel:       #FFFFFF;
  --text-muted:  #6B7280;

  /* Light-theme fallbacks for the surface tokens that originally lived
     only in styles.css. Some pages (the OMC map dashboards: clinics-
     readiness, clinics-holy-sites, omc-readiness) link moh-brand.css +
     site-shell.css + dark-mode-tokens.css but NOT styles.css, so without
     these the Leaflet popup-content-wrapper override in site-shell.css
     (background: var(--card)) resolved to transparent in light mode and
     the popup body painted invisibly on top of the map tiles. The values
     match styles.css 1:1; dark-mode-tokens.css still rebinds for dark. */
  --bg:          #F9FAFB;
  --card:        #FFFFFF;
  --shadow:      0 0 8px rgba(0,0,0,0.08);
  --text-dark:   #101828;
  --text:        #475467;
  --divider:     #D9D9D9;
}

/* RTL body font cascade with !important so the 75+ inline
   `font-family: 'Noto Kufi Arabic', sans-serif` declarations across the
   portal become redundant no-ops without touching each file. Page-level
   font overrides still win because they bind directly to the element. */
html[dir="rtl"] body { font-family: var(--font-arabic)  !important; }
html[dir="ltr"] body { font-family: var(--font-english) !important; }