/* ════════════════════════════════════════════════
   01 — TOKENS
   Brand colors, type stacks, fonts, reset
   ════════════════════════════════════════════════ */

/* Single self-hosted brand typeface — ABC Favorit Arabic Variable (the
   licensed production file from the brand book). The full weight axis
   (100→900) and the Arabic + Latin glyphs needed by the theme are all
   covered by this one file. No external font services.

   The ?v= query string is a manual cache-buster for the font file specifically
   (WP's filemtime auto-busting only applies to enqueued CSS/JS, not @font-face
   URLs inside CSS). Bump v=N → v=N+1 whenever the font file changes so
   browsers refetch it instead of using their 7-day cached copy. */
@font-face {
  font-family: 'ABC Favorit Arabic';
  src: url('../fonts/ABCFavoritArabicVariable.ttf?v=1') format('truetype-variations'),
       url('../fonts/ABCFavoritArabicVariable.ttf?v=1') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand book palette */
  --maroon:        #521624;
  --maroon-light:  #6b2033;
  --maroon-deep:   #3a0e1a;
  --cream:         #e3e3d5;
  --cream-dark:    #d4d4c4;
  --olive-gold:    #b8a87c;
  --olive-gold-bright: #d4c089;
  --warm-brown:    #895d3b;
  --near-black:    #080a0e;
  --dark-teal:     #2b3a35;
  --dark-teal-deep: #1b2622;

  /* Text */
  --text-dark:     #080a0e;
  --text-light:    #e3e3d5;
  --text-muted:    #6b6b60;
  --text-cream:    rgba(227, 227, 213, 0.85);
  --text-cream-soft: rgba(227, 227, 213, 0.6);

  /* Overlay tints */
  --maroon-overlay: rgba(82, 22, 36, 0.88);
  --maroon-grad:    linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 60%, var(--maroon-light) 100%);
  --feature-grad:   linear-gradient(to right, var(--maroon-deep) 0%, rgba(58, 14, 26, 0.85) 35%, rgba(58, 14, 26, 0.4) 70%, transparent 100%);
  --teal-grad:      linear-gradient(to right, var(--dark-teal-deep) 0%, rgba(27, 38, 34, 0.85) 35%, rgba(27, 38, 34, 0.4) 70%, transparent 100%);

  /* Type stacks — single brand font (ABC Favorit Arabic Variable) for
     everything. --font-arabic and --font-serif both point at the same family
     (--font-serif is a historical alias from before the typeface
     consolidation; kept for compatibility with existing rules). */
  --font-arabic:   'ABC Favorit Arabic', sans-serif;
  --font-serif:    'ABC Favorit Arabic', sans-serif;

  /* Layout */
  --section-padding: 100px;
  --container-width: 1200px;
  --container-narrow: 900px;

  /* Type scale (responsive via clamp) */
  --fs-display:    clamp(56px, 8vw, 132px);
  --fs-headline:   clamp(40px, 5.5vw, 88px);
  --fs-section:    clamp(28px, 3.5vw, 56px);
  --fs-stat:       clamp(56px, 8vw, 120px);
  --fs-eyebrow:    clamp(11px, 1vw, 13px);
  --fs-body-lg:    clamp(17px, 1.4vw, 20px);
  --fs-body:       clamp(15px, 1.1vw, 17px);

  /* Spacing rhythm */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 120px;
}

/* RESET ─────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol { list-style: none; }
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-arabic);
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.7;
  direction: rtl;
  overflow-x: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--maroon); color: var(--cream); }