/* =====================================================================
   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);  }