:root {
  /* Al Burak Monochrome palette — white/black base, one crimson accent */
  --black: #0B0C0E;
  --bg: #F7F6F4;
  --surface: #FFFFFF;
  --surface-2: #F1F0EE;
  --surface-3: #E7E5E2;
  --white: #F4F5F7;

  --crimson: #C8102E;
  --crimson-dark: #A50D24;
  --crimson-bright: #E2173B;

  --muted: #5B5E66;
  --muted-2: #8A8D93;
  --line: rgba(11, 12, 14, 0.10);
  --line-strong: rgba(11, 12, 14, 0.18);

  /* Gradients */
  --grad-crimson: linear-gradient(135deg, var(--crimson), var(--crimson-bright));
  --grad-duotone: linear-gradient(160deg, rgba(11, 12, 14, .85), rgba(200, 16, 46, .28));

  /* Typography */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Type scale (fluid) */
  --fs-xs: clamp(12px, 0.9vw, 13px);
  --fs-sm: clamp(14px, 1vw, 15px);
  --fs-body: clamp(16px, 1.1vw, 18px);
  --fs-h3: clamp(22px, 2.4vw, 30px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h1: clamp(48px, 8vw, 108px);
  --fs-display: clamp(56px, 10vw, 140px);

  /* Spacing */
  --space-section: clamp(80px, 12vw, 160px);
  --space-gutter: 8vw;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .3s;
  --dur-mid: .6s;
  --dur-slow: 1.1s;

  --max-width: 1440px;
}

/* Deliberate full-black sections (hero, footer, loader, mobile menu, global/export band).
   Redefines the same role tokens so nested components (p, .eyebrow, .line, etc.) read
   correctly on a dark surface without needing per-component overrides. */
.on-dark {
  --muted: #9BA0AC;
  --muted-2: #6A6E78;
  --line: rgba(244, 245, 247, 0.09);
  --line-strong: rgba(244, 245, 247, 0.18);
  background: var(--black);
  color: var(--white);
}