/* Vision International — tokens: brand navy/teal + luxury accents (global optics–grade) */
:root {
  --font-body: var(--font-ar);
  --font-display-ar: "Reem Kufi", "Noto Kufi Arabic", system-ui, sans-serif;
  --color-navy: #070b12;
  --color-navy-mid: #1e293b;
  --color-brand-primary: #0f766e;
  --color-brand-primary-dark: #0b1220;
  --color-teal: #0d9488;
  --color-cyan: #06b6d4;
  --color-green: #22c55e;
  --color-lime: #84cc16;
  /* Warm accent — used sparingly like premium eyewear brands */
  --color-luxury-gold: #b8953e;
  --color-luxury-gold-soft: rgba(184, 149, 62, 0.14);
  --gradient-brand: linear-gradient(135deg, #0d9488 0%, #06b6d4 45%, #22c55e 100%);
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(13, 148, 136, 0.12) 0%,
    rgba(6, 182, 212, 0.1) 50%,
    rgba(34, 197, 94, 0.12) 100%
  );
  --color-brand-accent: #22c55e;
  --color-brand-accent-soft: rgba(34, 197, 94, 0.12);
  --color-surface: #f4f6f9;
  --color-surface-elevated: #ffffff;
  --color-surface-warm: #faf8f5;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-hero-overlay: rgba(11, 18, 32, 0.88);

  --font-ar: "Reem Kufi", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-ar-body: "Noto Kufi Arabic", system-ui, sans-serif;
  --font-en: "Source Sans 3", system-ui, sans-serif;
  --font-display-en: "Playfair Display", Georgia, serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-section: clamp(3.5rem, 10vw, 6.5rem);

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.12);
  --shadow-xl: 0 32px 80px rgba(11, 18, 32, 0.14);
  --shadow-glow: 0 0 40px rgba(6, 182, 212, 0.25);
  --shadow-header: 0 10px 40px rgba(11, 18, 32, 0.07);
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --header-h: 4.75rem;
  --header-h-scrolled: 4rem;
  --topbar-h: 2.25rem;
  --transition-fast: 0.18s ease;
  --transition-base: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 76rem;
}

html[lang="ar"] {
  --font-body: var(--font-ar);
}

/* All headings in Arabic use Reem Kufi */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: "Reem Kufi", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 600;
}

/* Paragraphs keep Noto for readability */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] label {
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
}

html[lang="en"] {
  --font-body: var(--font-en);
}

html[lang="en"] .font-display {
  font-family: var(--font-display-en);
}
