/* ============================================================
   MAARIFAT-UL-ULOOM ACADEMY — DESIGN TOKENS  (Step 2 · v1.0 · DRAFT FOR APPROVAL)
   Direction: "Illuminated Manuscript x Modern Classroom"

   This file is a standalone token sheet. It does NOT replace the
   current assets/css/style.css and touches no admin files. It is
   the single source of truth that Step 3 pages will be built on.

   Contrast (WCAG 2.1 AA, verified) is noted next to every text pairing.
   RULE: --gold-400 / --gold-500 are for lines, fills and dark backgrounds.
         On light backgrounds, gold TEXT must use --gold-700.
   ============================================================ */

/* ---------- Fonts: load with <link rel="preconnect"> + <link rel="stylesheet">, NOT @import ----------
   https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cinzel:wght@600;700&family=Poppins:wght@400;500;600&display=swap
   (5 Latin files + 1-2 Arabic files. Self-host in Step 3 for speed and privacy.)
*/

:root {
  /* ============ 1. PRIMITIVE PALETTE ============ */

  /* Deep Navy / Midnight (official brand guide: Navy #1F2A44, Cream #F3E7CF, Gold #D8BE8A, Light Gold #E8D8B5, Shadow #2C2F38) */
  --navy-950: #0E1526;   /* footer, cinematic shadows */
  --navy-900: #141D33;   /* dark section background */
  --navy-800: #1F2A44;   /* BRAND NAVY (kept) — primary text on light, dark-header */
  --navy-700: #2C3A5C;   /* raised surface on dark */
  --navy-500: #4A5573;   /* body-soft text on light        6.75:1 on ivory-100 */
  --navy-400: #5B6584;   /* muted text on light (min)      5.26:1 on ivory-100 */
  --mist:     #C7CEE0;   /* secondary text on navy         10.6:1 on navy-900  */

  /* Warm Ivory / Parchment */
  --ivory-50:  #FFFDF7;  /* card / parchment surface */
  --ivory-100: #FAF4E6;  /* page background */
  --ivory-200: #F3E7CF;  /* BRAND CREAM (kept) — alt sections, text on navy */
  --line:      #E3D5B5;  /* hairlines on ivory */

  /* Gold */
  --gold-300: #E8D8B5;   /* light gold: highlight, text on navy-950 */
  --gold-400: #D8BE8A;   /* BRAND GOLD (kept): lines, icons, fills, text ON NAVY only */
  --gold-500: #BFA070;   /* decorative linework only (2.3:1 on ivory — never text) */
  --gold-700: #7A5C1E;   /* GOLD TEXT ON LIGHT   5.7:1 on ivory-100, 5.1:1 on ivory-200 */
  --gold-800: #5E4514;   /* small gold text on cream  7.3:1 */

  /* Deep Emerald */
  --emerald-100: #EDE4CF; /* tint / selected background */
  --emerald-300: #E8D8B5; /* emerald highlight ON NAVY  8.3:1 on navy-900 */
  --emerald-500: #2C3A5C; /* icon / progress */
  --emerald-700: #1F2A44; /* CTA / status / selected     7.2:1 on ivory-100; ivory-50 text on it 7.8:1 */
  --emerald-800: #141D33; /* CTA hover */

  /* Supporting */
  --white:       #FFFFFF;
  --charcoal-900:#22252D; /* long-form text alternative  14:1 */
  --charcoal-700:#2C2F38; /* shadow tint */
  --brick-700:   #8A2F1D; /* error text                  8.2:1 on ivory-50 */
  --brick-100:   #F6E3DE; /* error background */

  /* ============ 2. SEMANTIC TOKENS — LIGHT (default) ============ */
  --bg:            var(--ivory-100);
  --bg-alt:        var(--ivory-200);
  --surface:       var(--ivory-50);
  --surface-sunk:  var(--ivory-200);
  --text:          var(--navy-800);
  --text-soft:     var(--navy-500);
  --text-muted:    var(--navy-400);
  --heading:       var(--navy-800);
  --accent-text:   var(--gold-700);     /* eyebrows, labels, links-on-light */
  --accent-line:   var(--gold-400);     /* borders, rules, icons */
  --accent-fill:   var(--gold-400);
  --cta-bg:        var(--emerald-700);
  --cta-bg-hover:  var(--emerald-800);
  --cta-text:      var(--ivory-50);
  --selected-bg:   var(--emerald-100);
  --selected-text: var(--emerald-700);
  --border:        var(--line);
  --border-strong: rgba(31, 42, 68, 0.28);
  --error:         var(--brick-700);
  --error-bg:      var(--brick-100);
  --success:       var(--emerald-700);
  --focus-ring:    var(--gold-700);     /* 2px, offset 3px */

  /* ============ 3. TYPOGRAPHY ============ */
  --font-display: 'Cinzel', 'Times New Roman', serif;         /* wordmark, H1, short display H2 */
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:  'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  /* Fluid scale: min at 360px viewport, max at 1280px */
  --fs-h1:    clamp(2.25rem, 1.55rem + 3.1vw, 4rem);      /* 36 -> 64 */
  --fs-h2:    clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);   /* 28 -> 44 */
  --fs-h3:    clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);  /* 20 -> 26 */
  --fs-lead:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* 17 -> 20 */
  --fs-body:  1.0625rem;                                  /* 17  (16 on <400px handled in Step 3) */
  --fs-small: 0.875rem;                                   /* 14 */
  --fs-label: 0.78rem;                                    /* 12.5, uppercase, tracked */
  --fs-btn:   0.9375rem;                                  /* 15 */
  --fs-nav:   0.9375rem;                                  /* 15 */
  --fs-arabic-scale: 1.3;                                 /* Arabic = Latin size x1.3 */

  --lh-h1: 1.1;  --lh-h2: 1.2;  --lh-h3: 1.3;  --lh-body: 1.7;  --lh-arabic: 2;
  --tracking-display: 0.01em;
  --tracking-label:   0.16em;
  --measure-body: 62ch;
  --measure-h1:   16ch;
  --measure-h2:   24ch;

  /* ============ 4. SPACE, SHAPE, ELEVATION ============ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 9vw, 136px);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);

  --radius-xs: 6px;  --radius-sm: 10px;  --radius-md: 14px;
  --radius-lg: 22px; --radius-arch: 999px 999px 14px 14px;   /* arch-shaped image frames */

  --shadow-sm:   0 1px 2px rgba(20, 29, 51, .06), 0 4px 12px rgba(20, 29, 51, .06);
  --shadow-md:   0 2px 4px rgba(20, 29, 51, .05), 0 14px 32px rgba(20, 29, 51, .10);
  --shadow-lg:   0 4px 8px rgba(20, 29, 51, .06), 0 28px 60px rgba(20, 29, 51, .16);
  --shadow-cta:  0 10px 24px rgba(31,42,68, .28);
  --glow-cta:    0 0 0 4px rgba(31,42,68, .16), 0 14px 32px rgba(31,42,68, .34);
  --glow-gold:   0 0 0 4px rgba(216, 190, 138, .22), 0 14px 32px rgba(216, 190, 138, .22);
  --hairline-gold: inset 0 0 0 1px rgba(216, 190, 138, .55);

  /* ============ 5. MOTION ============ */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;  /* press */
  --dur-2: 220ms;  /* hover, focus */
  --dur-3: 420ms;  /* small reveals */
  --dur-4: 700ms;  /* section reveals */
  --dur-5: 1200ms; /* line-draw, hero intro */
  --reveal-distance: 24px;
  --stagger: 70ms;

  /* ============ 6. LAYERS + BREAKPOINTS (documented; use in @media) ============ */
  --z-base: 0;  --z-sticky: 50;  --z-header: 100;  --z-sheet: 200;  --z-modal: 300;
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px */
  --header-h: 76px;
  --header-h-mobile: 64px;
  --sticky-bar-h: 68px;               /* + env(safe-area-inset-bottom) */
  --tap-min: 44px;                    /* minimum touch target */
}

/* ============ SEMANTIC TOKENS — DARK SECTIONS ============
   Use on any section (or the whole page) via class or data attribute.
   Gold text is allowed here; emerald text uses --emerald-300.        */
.theme-dark,
[data-theme="dark"] {
  --bg:            var(--navy-900);
  --bg-alt:        var(--navy-950);
  --surface:       var(--navy-700);
  --surface-sunk:  var(--navy-950);
  --text:          var(--ivory-200);   /* 13.7:1 */
  --text-soft:     var(--mist);        /* 10.6:1 */
  --text-muted:    var(--mist);        /* never use navy-400 on navy */
  --heading:       var(--ivory-50);
  --accent-text:   var(--gold-400);    /* 9.3:1 on navy-900 */
  --accent-line:   var(--gold-400);
  --cta-bg:        var(--gold-400);    /* dark-section primary CTA = gold */
  --cta-bg-hover:  var(--gold-300);
  --cta-text:      var(--navy-800);    /* 7.9:1 */
  --selected-bg:   rgba(124, 196, 175, .16);
  --selected-text: var(--emerald-300);
  --border:        rgba(232, 216, 181, .16);
  --border-strong: rgba(232, 216, 181, .4);
  --focus-ring:    var(--gold-400);
  --shadow-md:     0 2px 4px rgba(0,0,0,.25), 0 14px 32px rgba(0,0,0,.35);
}

/* ============ BASE (opt-in; Step 3 will import this) ============ */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { color: var(--heading); margin: 0; text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-display); max-width: var(--measure-h1); }
h2 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); max-width: var(--measure-h2); letter-spacing: -0.01em; }
h2.display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); } /* 4 words or fewer */
h3 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
p  { margin: 0; max-width: var(--measure-body); text-wrap: pretty; }
.lead  { font-size: var(--fs-lead); color: var(--text-soft); }
.small { font-size: var(--fs-small); line-height: 1.6; }
.label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-text);
}
.arabic { font-family: var(--font-arabic); direction: rtl; line-height: var(--lh-arabic); font-size: calc(1em * var(--fs-arabic-scale)); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: var(--z-modal);
  padding: 12px 18px; background: var(--navy-800); color: var(--ivory-50);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ============ BUTTONS ============ */
.btn {
  --_h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--_h); padding: 0 26px;
  border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.98); transition-duration: var(--dur-1); }
.btn--lg { --_h: 56px; padding: 0 30px; }
.btn--sm { --_h: 44px; padding: 0 18px; font-size: .875rem; }   /* 44px = tap minimum */

.btn--primary   { background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--hairline-gold), var(--shadow-cta); }
.btn--primary:hover { background: var(--cta-bg-hover); box-shadow: var(--hairline-gold), var(--glow-cta); transform: scale(1.02); }
.theme-dark .btn--primary:hover { box-shadow: var(--glow-gold); }

.btn--secondary { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.btn--secondary:hover { background: var(--heading); color: var(--bg); }

.btn--whatsapp  { background: transparent; color: var(--emerald-700); box-shadow: inset 0 0 0 1.5px var(--emerald-700); }
.btn--whatsapp:hover { background: var(--emerald-100); }
.theme-dark .btn--whatsapp { color: var(--emerald-300); box-shadow: inset 0 0 0 1.5px var(--emerald-300); }

.btn--link { min-height: var(--tap-min); padding: 0; background: none; color: var(--accent-text); box-shadow: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.btn[disabled], .btn[aria-disabled="true"] { background: #E7E1D2; color: #6B7080; box-shadow: none; cursor: not-allowed; transform: none; }

/* ============ MOTION SAFETY ============ */
.reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
/* If JS never runs, content must still show: Step 3 adds <html class="js"> and scopes .reveal under .js */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ PLACEHOLDER MARKER (used during development) ============ */
.is-placeholder { outline: 2px dashed var(--gold-700); outline-offset: -2px; }
.is-placeholder::after {
  content: attr(data-placeholder);
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px;
  font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ivory-50); color: var(--gold-800); border-radius: 4px;
}