/* Design tokens: the only place where raw color values live. */
:root {
  /* Brand colors */
  --navy: #003A4E;
  --gold: #F1C579;
  --cream: #FFF7EA;
  --white: #FFFFFF;
  --teal: #0080AC; /* only as a second stop in navy gradients */

  /* Transparent tints of the brand colors */
  --navy-90: rgba(0, 58, 78, 0.9);
  --navy-85: rgba(0, 58, 78, 0.85);
  --navy-78: rgba(0, 58, 78, 0.78);
  --navy-72: rgba(0, 58, 78, 0.72);
  --navy-60: rgba(0, 58, 78, 0.6);
  --navy-92: rgba(0, 58, 78, 0.92);
  --navy-75: rgba(0, 58, 78, 0.75);
  --navy-45: rgba(0, 58, 78, 0.45);
  --navy-40: rgba(0, 58, 78, 0.4);
  --navy-35: rgba(0, 58, 78, 0.35);
  --navy-15: rgba(0, 58, 78, 0.15);
  --navy-08: rgba(0, 58, 78, 0.08);
  --navy-04: rgba(0, 58, 78, 0.04);
  --gold-60: rgba(241, 197, 121, 0.6);
  --gold-45: rgba(241, 197, 121, 0.45);
  --gold-35: rgba(241, 197, 121, 0.35);
  --gold-20: rgba(241, 197, 121, 0.2);
  --gold-12: rgba(241, 197, 121, 0.12);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-72: rgba(255, 255, 255, 0.72);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);
  --cream-92: rgba(255, 247, 234, 0.92);
  --teal-14: rgba(0, 128, 172, 0.14);

  /* Semantic roles */
  --color-bg: var(--cream);
  --color-text: var(--navy);
  --color-text-muted: var(--navy-72);
  --color-accent: var(--gold);
  --color-on-dark: var(--white);
  --color-on-dark-muted: var(--white-72);

  /* Gradients */
  --grad-navy: linear-gradient(135deg, var(--navy) 0%, var(--teal) 140%);
  --grad-hero: linear-gradient(120deg, var(--navy-85) 0%, var(--navy-60) 55%, var(--gold-35) 100%); /* unused, kept for reference */
  --grad-hero-legacy:
    linear-gradient(to bottom, var(--navy-40) 0%, transparent 20%),
    radial-gradient(ellipse 18% 75% at 50% 42%, var(--navy-72) 0%, var(--navy-40) 55%, transparent 100%);
  --grad-hero-spot: radial-gradient(ellipse 14% 42% at 48% 45%, var(--navy-72) 0%, var(--navy-40) 50%, transparent 100%);
  --grad-hero-top: linear-gradient(to bottom, var(--navy-40) 0%, transparent 14%);
  --grad-hero-desktop: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--navy-35) 52%, var(--navy-75) 68%, var(--navy-92) 85%, var(--navy-92) 100%);
  --grad-hero-mobile: linear-gradient(to bottom, var(--navy-72) 0%, var(--navy-40) 28%, transparent 40%, transparent 60%, var(--navy-60) 100%);

  /* Glass */
  --glass-dark-bg: var(--white-10);
  --glass-dark-border: var(--white-22);
  --glass-dark-fallback: var(--navy-85);
  --glass-light-bg: var(--white-55);
  --glass-light-border: var(--gold-45);
  --glass-light-fallback: var(--cream-92);

  /* Spacing, 8px scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --section-pad: clamp(72px, 10vw, 136px);

  /* Radius */
  --radius-sm: 12px;
  --radius-card: 24px;
  --radius-panel: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px var(--navy-08);
  --shadow-md: 0 12px 32px var(--navy-08), 0 2px 6px var(--navy-04);
  --shadow-lg: 0 24px 64px var(--navy-15);

  /* Typography */
  --font: 'Poppins', 'Tajawal', sans-serif;
  --font-decor: 'Amiri', serif; /* calligraphy watermark only */
  --fs-h1: clamp(36px, 6vw, 84px);
  --fs-h2: clamp(28px, 4vw, 52px);
  --fs-h3: clamp(18px, 1.5vw, 22px);
  --fs-lead: clamp(16px, 1.3vw, 20px);
  --fs-body: clamp(15px, 1.1vw, 18px);
  --fs-small: 14px;
  --fs-xs: 12px;
  --lh-body: 1.7;
  --lh-tight: 1.15;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --hero-inset: clamp(8px, 1.2vw, 16px);

  /* Motion */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1); /* power3.out */
  --dur: 0.6s;
}