/**
 * UMG Ecosystem Design System — Master Tokens
 * Version: 1.0.0 — Jul 7 2026
 * Owner: UMG Creative Director (Katib)
 *
 * LOCKED by ecosystem brand council Jul 7 2026.
 * Import this file once at the root of any UMG property.
 *
 * Font CDN: Bunny Fonts (fonts.bunny.net) — NEVER Google Fonts.
 * CSP note: style-src AND font-src MUST allow fonts.bunny.net.
 *
 * Kill list (rogue tokens — grep+purge on sight):
 *   #2D5016  #10B981  #C4A265  (rogue greens/gold)
 *   arbitrary blues not in this file
 */

/* ─────────────────────────────────────────────────────────────────────────
   FONTS — via Bunny Fonts (drop-in Google Fonts replacement)
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.bunny.net/css?family=amiri:400,400i,700,700i&display=swap');
@import url('https://fonts.bunny.net/css?family=outfit:300,400,500,600,700&display=swap');
@import url('https://fonts.bunny.net/css?family=noto-naskh-arabic:400,500,600,700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   MASTER PALETTE — locked, canonical
   ───────────────────────────────────────────────────────────────────────── */

:root {

  /* Green axis */
  --forest:        #166534;  /* Master action green — CTAs, links, active states */
  --forest-deep:   #0F4A26;  /* Hover/pressed state for forest */
  --emerald:       #065F46;  /* UmmahCauses — deeper giving tint, not for CTAs */

  /* Gold axis — heritage/value/scarcity ONLY, NEVER a CTA button */
  --gold:          #C8912E;  /* Master brand gold — money, pricing, launch urgency, heritage marks */
  --gold-bright:   #DFA032;  /* Executive + Pulse surfaces only */

  /* Dark axis */
  --void:          #060B18;  /* ummah.city dark canvas — do NOT use on consumer products */
  --ink:           #0F1F17;  /* Body text / dark neutral */
  --slate:         #1B2A4A;  /* Corporate / MuslimReach enterprise surfaces */

  /* Light axis */
  --cream:         #FAF8F3;  /* Primary surface / breathing room */
  --stone:         #EAE6DF;  /* Secondary surface / borders / dividers */

  /* Functional (frozen — never reassign to marketing) */
  --live-green:    #6DB87A;  /* Pulse LIVE flash / conversion signal — NOT a property color */
  --red:           #DC2626;  /* Admin Help-Mode / destructive actions ONLY */

  /* ─── PRISM — per-property jewel-tone accents ─────────────────────────
     Each property gets ONE accent color. PRISM extends the master palette
     as property-level signatures (accent only; master palette provides
     surfaces, type, and structure).
     Gold (#C8912E) is RESERVED for MAN/MuslimReach + money/heritage.
     Forest (#166534) is the UmmahCity / ecosystem-level color.
  ─────────────────────────────────────────────────────────────────────── */

  --prism-ummahcity:    #166534;  /* = --forest (the city IS the ecosystem) */
  --prism-ummahpass:    #5B93D6;  /* Sapphire — identity / SSO */
  --prism-ummahplaces:  #2D9B5F;  /* Sea-green — discovery / places */
  --prism-ummahcauses:  #D4662A;  /* Sienna orange — giving / charity */
  --prism-ummahjobs:    #0D9488;  /* Teal — work / opportunity */
  --prism-ummaharmy:    #C94A4A;  /* Crimson — mission / action */
  --prism-ummahbuzz:    #7B50D4;  /* Amethyst — community / content */
  --prism-man:          #C8912E;  /* = --gold (MAN/MuslimReach brand color) */
  --prism-ummahemail:   #C2458F;  /* Magenta-rose — communication / inbox */
  --prism-muslimreach:  #1B2A4A;  /* = --slate (enterprise, cool-register) */

/* ─────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────── */

  /* Font stacks */
  --font-display:  'Amiri', 'Times New Roman', serif;        /* Signature display — every property hero */
  --font-ui:       'Outfit', 'Helvetica Neue', Arial, sans-serif;  /* Universal UI + body */
  --font-arabic:   'Noto Naskh Arabic', 'Arial Unicode MS', serif; /* Extended Arabic */
  --font-mono:     'Courier New', 'Consolas', monospace;     /* Code / data */

  /* Type scale — 4px-anchored */
  --text-xs:    0.75rem;   /*  12px */
  --text-sm:    0.875rem;  /*  14px */
  --text-base:  1rem;      /*  16px */
  --text-md:    1.125rem;  /*  18px */
  --text-lg:    1.25rem;   /*  20px */
  --text-xl:    1.5rem;    /*  24px */
  --text-2xl:   1.875rem;  /*  30px */
  --text-3xl:   2.25rem;   /*  36px */
  --text-4xl:   3rem;      /*  48px */
  --text-5xl:   3.75rem;   /*  60px */
  --text-6xl:   4.5rem;    /*  72px */

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;

  /* Font weights */
  --weight-light:      300;
  --weight-normal:     400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

/* ─────────────────────────────────────────────────────────────────────────
   SPACING — 4px grid, multiples only
   ───────────────────────────────────────────────────────────────────────── */

  --space-0:    0;
  --space-1:    0.25rem;  /*  4px */
  --space-2:    0.5rem;   /*  8px */
  --space-3:    0.75rem;  /* 12px */
  --space-4:    1rem;     /* 16px */
  --space-5:    1.25rem;  /* 20px */
  --space-6:    1.5rem;   /* 24px */
  --space-8:    2rem;     /* 32px */
  --space-10:   2.5rem;   /* 40px */
  --space-12:   3rem;     /* 48px */
  --space-16:   4rem;     /* 64px */
  --space-20:   5rem;     /* 80px */
  --space-24:   6rem;     /* 96px */
  --space-32:   8rem;     /* 128px */

/* ─────────────────────────────────────────────────────────────────────────
   BORDER RADII
   ───────────────────────────────────────────────────────────────────────── */

  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;     /* Default: buttons, inputs */
  --radius-lg:    12px;    /* Default: cards */
  --radius-xl:    16px;    /* Large cards, panels */
  --radius-2xl:   24px;    /* Hero cards, feature panels */
  --radius-pill:  9999px;  /* Tags, badges, pills */

/* ─────────────────────────────────────────────────────────────────────────
   ELEVATION / SHADOWS
   ───────────────────────────────────────────────────────────────────────── */

  --shadow-xs:  0 1px 2px rgba(15, 31, 23, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 31, 23, 0.08), 0 1px 2px rgba(15, 31, 23, 0.05);
  --shadow-md:  0 4px 12px rgba(15, 31, 23, 0.10), 0 2px 4px rgba(15, 31, 23, 0.06);
  --shadow-lg:  0 8px 24px rgba(15, 31, 23, 0.12), 0 3px 8px rgba(15, 31, 23, 0.07);
  --shadow-xl:  0 16px 48px rgba(15, 31, 23, 0.14), 0 6px 16px rgba(15, 31, 23, 0.08);
  --shadow-gold: 0 4px 16px rgba(200, 145, 46, 0.25);  /* Gold accent glow — exec surfaces */

/* ─────────────────────────────────────────────────────────────────────────
   TRANSITION + MOTION
   ───────────────────────────────────────────────────────────────────────── */

  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:   cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease:      cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

/* ─────────────────────────────────────────────────────────────────────────
   Z-INDEX SCALE
   ───────────────────────────────────────────────────────────────────────── */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-help-mode: 99999;  /* Admin Help-Mode banner — always on top */

/* ─────────────────────────────────────────────────────────────────────────
   BREAKPOINTS (reference only — use in media queries by value)
   ───────────────────────────────────────────────────────────────────────── */

  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

}

/* ─────────────────────────────────────────────────────────────────────────
   FIREWALLED THEME A — "Ummah" (warm consumer family)
   Properties: UmmahCity, Ummah One, UmmahPlaces, UmmahCauses,
               UmmahArmy, ummah.email, UmmahChat, ummah.me
   Apply via: <html data-umg-theme="ummah"> or .theme-ummah
   ───────────────────────────────────────────────────────────────────────── */

[data-umg-theme="ummah"],
.theme-ummah {

  /* Surface hierarchy */
  --surface-base:      var(--cream);    /* Page background */
  --surface-raised:    #FFFFFF;         /* Cards on cream */
  --surface-sunken:    var(--stone);    /* Inputs, code blocks */
  --surface-overlay:   rgba(15,31,23,0.6); /* Modal backdrops */

  /* Text hierarchy */
  --text-primary:      var(--ink);      /* Body, headings */
  --text-secondary:    #4A6356;         /* Labels, captions */
  --text-muted:        #7D9E8C;         /* Placeholder, disabled */
  --text-inverse:      var(--cream);    /* Text on dark/forest backgrounds */

  /* Action */
  --action-primary:    var(--forest);
  --action-primary-hover: var(--forest-deep);
  --action-secondary:  var(--cream);
  --action-border:     var(--forest);

  /* Borders */
  --border-subtle:     var(--stone);    /* Dividers */
  --border-default:    #D1C8BF;         /* Input borders */
  --border-strong:     #B8AD9E;         /* Emphasized borders */
  --border-action:     var(--forest);   /* Focus rings, active */

  /* Geometry signature (watermark) */
  --star-watermark-opacity: 0.25;
  --star-watermark-color:   var(--forest);

}

/* ─────────────────────────────────────────────────────────────────────────
   FIREWALLED THEME B — "MuslimReach" (cool enterprise family)
   Properties: MAN, MuslimReach Exchange, MuslimReach PMP
   Apply via: <html data-umg-theme="muslimreach"> or .theme-muslimreach
   NEVER mix with the Ummah consumer palette.
   ───────────────────────────────────────────────────────────────────────── */

[data-umg-theme="muslimreach"],
.theme-muslimreach {

  /* Surface hierarchy */
  --surface-base:      #F4F6FA;         /* Cool near-white */
  --surface-raised:    #FFFFFF;
  --surface-sunken:    #E8EDF5;
  --surface-overlay:   rgba(27,42,74,0.7);

  /* Text hierarchy */
  --text-primary:      var(--slate);
  --text-secondary:    #4A5A7A;
  --text-muted:        #8A97B5;
  --text-inverse:      #F4F6FA;

  /* Action */
  --action-primary:    var(--slate);    /* Deep slate — enterprise primary */
  --action-primary-hover: #111D35;
  --action-secondary:  #F4F6FA;
  --action-border:     var(--slate);

  /* Accent — gold for value/pricing only, never CTA */
  --action-accent:     var(--gold-bright);

  /* Borders */
  --border-subtle:     #DDE3EF;
  --border-default:    #C4CDE0;
  --border-strong:     #9AAAC8;
  --border-action:     var(--slate);

  /* Geometry signature */
  --star-watermark-opacity: 0.12;
  --star-watermark-color:   var(--slate);

}

/* ─────────────────────────────────────────────────────────────────────────
   UMMAH.CITY DARK CANVAS — void surface (exec/Pulse surfaces)
   Apply via: [data-umg-theme="void"] — ummah.city dark-default
   HELD: Tab explicit go required for dark-default flip (Jul 7 directive).
   ───────────────────────────────────────────────────────────────────────── */

[data-umg-theme="void"],
.theme-void {

  --surface-base:      var(--void);     /* #060B18 */
  --surface-raised:    #0D1525;
  --surface-sunken:    #060B18;
  --surface-overlay:   rgba(0,0,0,0.7);

  --text-primary:      var(--cream);
  --text-secondary:    rgba(250,248,243,0.7);
  --text-muted:        rgba(250,248,243,0.4);
  --text-inverse:      var(--ink);

  --action-primary:    var(--gold-bright);
  --action-primary-hover: #EEB034;
  --action-secondary:  rgba(250,248,243,0.1);
  --action-border:     var(--gold-bright);

  --border-subtle:     rgba(250,248,243,0.08);
  --border-default:    rgba(250,248,243,0.15);
  --border-strong:     rgba(250,248,243,0.25);
  --border-action:     var(--gold-bright);

  --star-watermark-opacity: 0.07;
  --star-watermark-color:   var(--gold-bright);

}

/* ─────────────────────────────────────────────────────────────────────────
   ACCESSIBLE CONTRAST HELPERS
   ───────────────────────────────────────────────────────────────────────── */

/* Forest on cream:  #166534 on #FAF8F3 = 7.2:1 AAA */
/* Ink on cream:     #0F1F17 on #FAF8F3 = 14.8:1 AAA */
/* Gold on ink:      #C8912E on #0F1F17 = 4.6:1 AA  */
/* Cream on forest:  #FAF8F3 on #166534 = 7.2:1 AAA */

/* Minimum tap target: 44x44px (iOS/Android HIG) */
/* Minimum contrast for text: 4.5:1 AA (WCAG 2.1) */
/* Minimum contrast for UI components: 3:1           */

/* ─────────────────────────────────────────────────────────────────────────
   PRINT / EXPORT OVERRIDES
   ───────────────────────────────────────────────────────────────────────── */

@media print {
  :root {
    --forest: #166534;
    --cream:  #FFFFFF;
    --ink:    #000000;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}