/* ============================================================
   Sehet Masr — Design Tokens (per Build Package file 02)
   MOH primary system + e& partner accent + HealthTag (Discounts only) + UHI accent.
   Never hardcode hex in components — always use these tokens.
   ============================================================ */

:root {
  /* --- MOH / government (primary system) --- */
  --moh-primary:        #0E7C7B;
  --moh-primary-dark:   #0A5E5D;
  --moh-primary-tint:   #E6F2F1;
  --moh-gold:           #C8A24B;
  --moh-ink:            #12211F;
  --moh-ink-2:          #4A5B58;
  --moh-line:           #DCE5E3;
  --moh-bg:             #F6F9F8;
  --moh-surface:        #FFFFFF;
  --success:            #1B7F4B;
  --warning:            #B7791F;
  --danger:             #C0362C;
  --info:               #2563A8;

  /* --- e& (partner accent) --- */
  --eand-red:     #E00800;
  --eand-maroon:  #4B0F1E;
  --eand-grey:    #636363;
  --eand-beige:   #E6E6DC;

  /* --- HealthTag (Discounts module only) --- */
  --htag-teal:    #0FA69C;
  --htag-teal-dk: #0B7E77;
  --htag-tint:    #E4F5F3;

  /* --- UHI accent (post-UHI features) --- */
  --uhi-accent:   #1F6FB2;
  --uhi-tint:     #E8F1F9;

  /* --- semantic surface tints --- */
  --success-tint: #E7F3EC;
  --warning-tint: #FBF2E1;
  --danger-tint:  #F8E9E7;
  --info-tint:    #E7EEF7;

  /* --- typography --- */
  --font-ar: "IBM Plex Sans Arabic", "Cairo", "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-en: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-app: var(--font-ar);

  --fs-display: 2.0rem;
  --fs-h1: 1.5rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.125rem;
  --fs-body: 1.0rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-body: 1.5;
  --lh-heading: 1.25;

  /* --- radius / elevation / spacing --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18,33,31,.06), 0 1px 3px rgba(18,33,31,.05);
  --sh-2: 0 4px 14px rgba(18,33,31,.08);
  --sh-3: 0 12px 32px rgba(18,33,31,.14);
  --sh-primary: 0 8px 24px rgba(14,124,123,.28);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --app-max: 480px;
  --tabbar-h: 66px;
  --appbar-h: 58px;

  --dur-fast: 160ms;
  --dur-mid: 240ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Language-driven font swap */
html[lang="en"] { --font-app: var(--font-en); }
html[lang="ar"] { --font-app: var(--font-ar); }
html[dir="rtl"] body { line-height: 1.6; }

/* --- Dark mode (token remap) --- */
:root[data-theme="dark"] {
  --moh-primary:      #34A9A6;
  --moh-primary-dark: #0E7C7B;
  --moh-primary-tint: #123433;
  --moh-ink:          #EAF2F0;
  --moh-ink-2:        #9DB2AE;
  --moh-line:         #24322F;
  --moh-bg:           #0C1615;
  --moh-surface:      #12211F;
  --eand-beige:       #23201C;
  --htag-tint:        #0E2A28;
  --uhi-tint:         #0F2434;
  --moh-gold:         #D8B667;
  --success-tint: #10231A;
  --warning-tint: #2A2110;
  --danger-tint:  #2A1513;
  --info-tint:    #101F2E;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 14px rgba(0,0,0,.5);
  --sh-3: 0 12px 32px rgba(0,0,0,.6);
}
