/* ════════════════════════════════════════════════════════════
   CBM — Shared base (Variant B extraction)
   Design tokens + reset + body + film-grain + reveal utilities.
   Linked BEFORE each page's inline <style>, so any page-level rule
   still overrides these. Edit tokens here once for the whole site.
   ════════════════════════════════════════════════════════════ */

/* ── Arabic typography + RTL (active only when lang=ar / dir=rtl) ── */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button{
  font-family:'Noto Kufi Arabic','Segoe UI',sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] em, html[lang="ar"] blockquote,
html[lang="ar"] [class*="-h1"], html[lang="ar"] [class*="-h2"],
html[lang="ar"] .nav-logo, html[lang="ar"] .vc-nav-logo,
html[lang="ar"] .section-tag, html[lang="ar"] .vc-light-tag{
  font-family:'Amiri','Noto Kufi Arabic',serif !important;
}
/* keep the Latin brand wordmark in its original serif even in AR */
html[lang="ar"] .nav-logo-top, html[lang="ar"] .nav-logo-bottom{
  font-family:'Cinzel',serif !important;
}
/* RTL flips text flow via the dir attribute; keep numerals/latin runs LTR-safe */
[dir="rtl"]{ text-align:right; }
[dir="rtl"] .marquee, [dir="rtl"] [class*="marquee"]{ direction:ltr; }

/* ── DESIGN TOKENS (superset of every page) ── */
:root{
  --black:      #0a0a08;
  --deep:       #0e0e0c;
  --dark:       #141410;
  --gold-1:     #b8922a;
  --gold-2:     #c9a64a;
  --gold-3:     #e8c97a;
  --gold-4:     #f5e4a8;
  --gold-grad:  linear-gradient(135deg,#b8922a 0%,#c9a64a 35%,#e8c97a 55%,#f5e4a8 75%,#b8922a 100%);
  --gold-grad-h:linear-gradient(135deg,#c9a64a 0%,#f5e4a8 50%,#e8c97a 100%);
  --gold-text:  linear-gradient(135deg,#c9a64a 0%,#e8c97a 40%,#f5e4a8 60%,#c9a64a 100%);
  --ivory:      #f5f0e8;
  --cream:      #faf8f5;
  --text-muted: #c8c2b8;
  --text-dim:   #8a8478;
  --brd:        rgba(201,169,110,0.15);
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:clip;scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--ivory);
  font-family:'Cormorant Garamond',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-overflow-scrolling:touch;
}

/* ── FILM-GRAIN OVERLAY ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.14;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── UTILITIES ── */
.gold-text{background:var(--gold-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gold-line{height:1px;background:var(--gold-grad);}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:0.15s;}
.reveal-delay-2{transition-delay:0.3s;}