/* =====================================================================
   AL GAWEESH — "MONOLITH" DESIGN SYSTEM · TOKENS
   Derived from the Al Gaweesh mark: a square of continuous parallel
   lines (5-unit stroke on a 9-unit pitch). Monochrome, architectural,
   generous. Black, stone greys and white — nothing else.
   ===================================================================== */
:root {
  /* ---- Ink scale (neutral, very slightly warm) ---- */
  --ink-1000: #070707;
  --ink-950: #0c0c0c;
  --ink-900: #131313;
  --ink-850: #1a1a1a;
  --ink-800: #222222;
  --ink-750: #2b2b2b;
  --ink-700: #363636;
  --ink-600: #4d4d4c;
  --ink-500: #6d6d6b;
  --ink-400: #92928f;
  --ink-300: #b6b6b2;
  --ink-200: #d4d4d0;
  --ink-150: #e2e2de;
  --ink-100: #ececea;
  --ink-50:  #f5f5f3;
  --ink-0:   #ffffff;

  /* ---- Stone: the one quiet accent (grey with a breath of green) ---- */
  --stone-700: #4f544e;
  --stone-500: #8e958c;
  --stone-300: #c3c8c0;
  --stone-200: #d9ddd6;
  --stone-100: #e8ebe6;

  /* ---- Silver light (hero glows, highlights) ---- */
  --silver-glow: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 70%);
  --silver-sheen: linear-gradient(115deg, #8f8f8c 0%, #f4f4f1 38%, #a9a9a6 55%, #ffffff 70%, #8a8a87 100%);

  /* ---- Type families ---- */
  --font-latin: "Inter Tight", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-brand: "Marcellus", "Optima", "Candara", "Times New Roman", serif;
  --font-arabic: "Alexandria", "IBM Plex Sans Arabic", "Geeza Pro", "SF Arabic", "Segoe UI", "DejaVu Sans", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-mega: clamp(64px, 11vw, 200px);
  --fs-d1: clamp(48px, 7.6vw, 136px);
  --fs-d2: clamp(40px, 5.6vw, 96px);
  --fs-h1: clamp(32px, 4vw, 64px);
  --fs-h2: clamp(24px, 2.6vw, 40px);
  --fs-h3: clamp(19px, 1.55vw, 24px);
  --fs-lead: clamp(17px, 1.35vw, 21px);
  --fs-body: clamp(15px, 1.05vw, 17px);
  --fs-small: 13px;
  --fs-micro: 11px;
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.55;
  --track-tight: -0.035em;
  --track-head: -0.02em;
  --track-wide: 0.16em;
  --track-brand: 0.24em;

  /* ---- Space (4-pt) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: clamp(16px, 4vw, 64px);
  --header-h: 72px;

  /* ---- Shape: radii echo the soft-cornered cards of the references ---- */
  --r-pill: 999px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --hair: 1px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 240ms;
  --t-med: 640ms;
  --t-slow: 1100ms;
  --t-draw: 2200ms;
  --stagger: 70ms;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.6);
  --shadow-2: 0 30px 80px -30px rgba(0,0,0,.55);
}

/* ---- Themes: every slide declares data-theme ---- */
[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --fg: var(--ink-50);
  --fg-2: var(--ink-300);
  --fg-3: var(--ink-500);
  --line: rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.22);
  --card: var(--ink-850);
  --card-2: var(--ink-800);
  --card-fg: var(--ink-50);
  --invert-bg: var(--ink-50);
  --invert-fg: var(--ink-950);
  --accent: var(--stone-300);
  --accent-fg: var(--ink-950);
}
[data-theme="light"] {
  --bg: var(--ink-50);
  --bg-2: var(--ink-100);
  --fg: var(--ink-950);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-400);
  --line: rgba(0,0,0,.12);
  --line-2: rgba(0,0,0,.24);
  --card: var(--ink-0);
  --card-2: var(--ink-150);
  --card-fg: var(--ink-950);
  --invert-bg: var(--ink-950);
  --invert-fg: var(--ink-50);
  --accent: var(--stone-200);
  --accent-fg: var(--ink-950);
}
[data-theme="stone"] {
  --bg: var(--stone-200);
  --bg-2: var(--stone-100);
  --fg: var(--ink-950);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --line: rgba(0,0,0,.14);
  --line-2: rgba(0,0,0,.26);
  --card: var(--stone-100);
  --card-2: var(--ink-0);
  --card-fg: var(--ink-950);
  --invert-bg: var(--ink-950);
  --invert-fg: var(--ink-50);
  --accent: var(--ink-950);
  --accent-fg: var(--ink-50);
}