/**
 * umg.ummah.city: design tokens
 *
 * Palette values match /root/UMG-Marketing/brand-system/tokens.css so this
 * page reads as the same brand as every other UMG property. This file does
 * NOT import that stylesheet wholesale (it is scoped to other surfaces and
 * carries tokens this page does not use); the values below are copied on
 * purpose, kept minimal, and should be re-diffed against the brand system
 * if either one moves.
 *
 * Fonts (CMO-3, estate voice) are SELF-HOSTED, not loaded from Bunny. This
 * is an investor-diligence surface with near-zero traffic, so the fewer
 * external requests before first paint, the better. NO Google assets.
 *
 *   Fraunces (display): weights 400/500/600/700, roman only. No italic
 *   cut is self-hosted anywhere on the fleet today (checked: ummahpass,
 *   ummah.email, ummah.me-v2 all carry the same four roman files). If the
 *   copy drop needs an italic emphasis line, either add the file or accept
 *   a browser-synthesized italic. That choice is flagged, not made, here.
 *
 *   Instrument Sans (body): one variable font file covers weight 400 to
 *   700, roman and italic, copied from the WordPress theme bundle already
 *   on this fleet (ummahjobs / masjidconnect twentytwentyfour theme assets).
 *
 *   Noto Naskh Arabic + Aref Ruqaa (Bismillah / footer benediction only):
 *   Tab's ruling, Aug 11 2026, restored these, "copy the live corp site's
 *   exact text treatment." The live ummahmediagroup.com/index.html uses
 *   these two families, neither self-hosted anywhere on the fleet, loaded
 *   via the SAME Bunny Fonts line the live site already uses. This is the
 *   only font import on this page that is not self-hosted, scoped to
 *   exactly these two families, and it is Bunny, never Google, per the
 *   degoogle rule. Color deliberately does NOT copy the live site's
 *   `--amber` (#F5A623): the design spec flags that hex as a retired
 *   palette not in tokens.css, so this page reuses its own locked
 *   --gold-text token instead, same warm register, no new or old color.
 *   @import MUST stay first, before any @font-face, or browsers drop it.
 */
@import url('https://fonts.bunny.net/css?family=noto-naskh-arabic:400,600,700|aref-ruqaa:400,700&display=swap');

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-variable.woff2') format('woff2-variations'),
       url('/fonts/instrument-sans-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-italic-variable.woff2') format('woff2-variations'),
       url('/fonts/instrument-sans-italic-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette, copied from brand-system tokens.css (see header note) */
  --forest:        #166534;
  --forest-deep:   #0F4A26;
  --gold:          #C8912E;
  --gold-text:     #96631A;
  --gold-bright:   #DFA032;
  --void:          #060B18;
  --ink:           #0F1F17;
  --cream:         #FAF8F3;

  --ink-editorial-strong: rgba(15, 31, 23, 0.78);
  --ink-editorial:        rgba(15, 31, 23, 0.58);
  --ink-editorial-faint:  rgba(15, 31, 23, 0.46);
  --rule:      rgba(15, 31, 23, 0.14);
  --rule-soft: rgba(15, 31, 23, 0.08);

  /* Estate-voice font stacks (CMO-3) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Instrument Sans', 'Inter', system-ui, sans-serif;
  /* Sacred layer only, never used elsewhere on the page */
  --font-arabic:         'Noto Naskh Arabic', serif;
  --font-arabic-display: 'Aref Ruqaa', 'Noto Naskh Arabic', serif;

  /* Light (default) surface roles */
  --surface-base:    var(--cream);
  --surface-raised:  #FFFFFF;
  --surface-tint:    #F2EEE4;
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-editorial-strong);
  --text-inverse:    var(--cream);
  --action-primary:       var(--forest);
  --action-primary-hover: var(--forest-deep);
  --action-primary-text:  var(--cream);
  --border-default:  var(--rule);
  --border-strong:   var(--ink);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 6px; --radius-lg: 20px;
}

/**
 * Theme switching: inherits ummah.city's own ratified data-umg-theme
 * system (/var/www/ummah.city/css/brand/tokens.css) rather than a
 * second, invented data-theme attribute. Two concrete values only,
 * ["ummah" = light default, "void" = dark]; <html> always carries one
 * of them (see index.html), so js/main.js is the single authority that
 * resolves saved-preference-or-system-preference into a concrete value
 * BEFORE paint reads these selectors -- no separate @media fallback
 * block is needed here (that duplication was the original bug: two
 * parallel mechanisms disagreeing about which attribute is real).
 */
:root[data-umg-theme="void"] {
  --surface-base:    var(--void);
  --surface-raised:  #0D1525;
  --surface-tint:    #0D1117;
  --text-primary:    var(--cream);
  --text-secondary:  rgba(250, 248, 243, 0.72);
  --text-inverse:    var(--ink);
  --action-primary:       var(--gold-bright);
  --action-primary-hover: #C9861F;
  --action-primary-text:  var(--ink);
  --border-default:  rgba(250, 248, 243, 0.14);
  --border-strong:   rgba(250, 248, 243, 0.4);
}

/* No-JS fallback (round 4): a visitor whose JS never runs (NoScript, failed
   load) has NO data-umg-theme attribute (the head script sets it otherwise).
   Mirror of the void block above -- if that block changes, change this too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-umg-theme]) {
    --surface-base:    var(--void);
    --surface-raised:  #0D1525;
    --surface-tint:    #0D1117;
    --text-primary:    var(--cream);
    --text-secondary:  rgba(250, 248, 243, 0.72);
    --text-inverse:    var(--ink);
    --action-primary:       var(--gold-bright);
    --action-primary-hover: #C9861F;
    --action-primary-text:  var(--ink);
    --border-default:  rgba(250, 248, 243, 0.14);
    --border-strong:   rgba(250, 248, 243, 0.4);
  }
}