/* ================================================================
   AMEERAH LEGACY FOUNDATION — DESIGN TOKENS (v2.0)
   Single source of truth for every colour, space, shadow, motion.
   LOAD ORDER: tokens.css  →  Bootstrap (grid only)  →  style.css
   ----------------------------------------------------------------
   Palette note (Directive 0.1 — Zero Hallucination):
   Gold is the PRIMARY brand colour and the gold values below are
   sampled from the REAL foundation logo (assets/img/logo.png — the
   metallic ring, crown, tree and "A"), NOT the spec's placeholder
   hexes. Emerald + violet are the logo's secondary/accent tones.
   ================================================================ */

:root {

  /* ── COLOR: PRIMARY (gold — real logo values, WCAG-checked) ── */
  --clr-gold:          #C2922E;              /* mid gold — safe as button bg w/ charcoal text */
  --clr-gold-light:    #F2C94C;              /* highlight gold — on dark backgrounds */
  --clr-gold-dark:     #946A00;              /* deep gold — ONLY gold that passes AA as text on white (4.86:1) */
  --clr-gold-subtle:   rgba(194,146,46,0.08);

  /* ── COLOR: SECONDARY (emerald — real logo leaves/robe) ── */
  --clr-emerald:       #0B6E3B;              /* 6.35:1 on white */
  --clr-emerald-light: #3D9E68;
  --clr-emerald-dark:  #08572F;
  --clr-emerald-subtle:rgba(11,110,59,0.08);

  /* ── COLOR: ACCENT (violet — real logo lotus / soft lilac) ── */
  --clr-violet:        #704880;              /* 7.17:1 on white — sparing highlights */
  --clr-lilac:         #C4B5D9;
  --clr-lilac-light:   #EDE8F5;
  --clr-lilac-subtle:  rgba(196,181,217,0.15);

  /* ── COLOR: NEUTRALS ── */
  --clr-charcoal:      #1C1C2E;
  --clr-charcoal-mid:  #3A3A52;
  --clr-charcoal-soft: #6B6B85;
  --clr-white:         #FFFFFF;
  --clr-off-white:     #F8F7F4;
  --clr-surface:       #F2F3F6;
  --clr-border:        rgba(28,28,46,0.10);

  /* ── TYPOGRAPHY ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem; /* was referenced but undefined — margins computed to 0 */
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: var(--space-24);

  /* ── BORDERS & RADII ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-color: var(--clr-border);

  /* ── SHADOWS ── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.10);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.14);
  --shadow-gold: 0 8px 32px rgba(194,146,46,0.28);
  --shadow-card: 0 4px 20px rgba(28,28,46,0.07);

  /* ── GLASSMORPHISM (only: sticky nav on scroll, hero stat cards) ── */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.40);
  --glass-blur:   blur(16px);
  --glass-shadow: 0 8px 32px rgba(28,28,46,0.10);

  /* ── TRANSITIONS ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:   var(--duration-base) var(--ease-in-out);
  --transition-slow:   var(--duration-slow) var(--ease-out-expo);
  --transition-bounce: var(--duration-slow) var(--ease-bounce);

  /* ── Z-INDEX SCALE ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* ================================================================
     LEGACY ALIASES — keep the existing --alf-* API alive so every
     already-built page keeps rendering while components migrate to
     the --clr-* system over Phases 2–9. Do NOT add new --alf-* refs.
     ================================================================ */
  --alf-primary:      var(--clr-emerald);
  --alf-primary-dark: var(--clr-emerald-dark);
  --alf-accent:       var(--clr-gold-dark);   /* CTA gold that is safe with white text */
  --alf-gold:         var(--clr-gold);
  --alf-gold-soft:    var(--clr-gold-light);
  --alf-violet:       var(--clr-violet);
  --alf-light:        var(--clr-off-white);
  --alf-dark:         var(--clr-charcoal);
  --alf-success:      #27ae60;
  --alf-danger:       #e74c3c;
  --alf-shadow:       var(--shadow-card);
  --alf-radius:       var(--radius-md);
  --alf-transition:   var(--transition-base);
}

@media (prefers-color-scheme: dark) {
  /* Reserved — do not implement dark mode unless explicitly scoped */
}

/* Global motion kill-switch — respected by CSS transitions, AOS and
   the vanilla counters in main.js (which also read this preference). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}