/* ==========================================================================
   MBI Design Tokens
   Single source of truth for colour, type, space, motion.
   ========================================================================== */
:root {
  /* --- Brand palette --- */
  --graphite: #14181A;
  --charcoal: #1E2426;
  --grey: #8A8A8A;
  --titanium: #B8B8B5;
  --stone: #E7E2D8;
  --ivory: #F4F1EA;
  --white: #FFFFFF;
  --emerald: #087260;
  --emerald-deep: #0a5b4d;
  --metallic: #A77A3A;

  /* --- Semantic surfaces --- */
  --bg: var(--ivory);
  --bg-alt: var(--white);
  --bg-stone: var(--stone);
  --bg-dark: var(--graphite);
  --bg-dark-alt: var(--charcoal);

  /* --- Text --- */
  --text: #151718;
  --text-soft: #41464a;
  --text-muted: #585d61;
  --text-on-dark: #f5f4f0;
  --text-on-dark-soft: #cdcfcc;
  --line: #ddd9cf;
  --line-strong: #c9c4b7;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* --- Accent roles --- */
  --accent: var(--emerald);
  --accent-2: var(--metallic);

  /* --- Typography --- */
  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Fluid type scale (clamp: min, fluid, max) — controlled, readable */
  --fs-eyebrow: 0.78rem;
  --fs-small: 0.9rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.28vw, 1.2rem);   /* 17 → 19px */
  --fs-lead: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  --fs-h4: clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  --fs-h2: clamp(2rem, 1.55rem + 2.1vw, 3.35rem);       /* 32 → 54px */
  --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);       /* 38 → 72px */
  --fs-display: clamp(2.75rem, 1.9rem + 4.4vw, 5.5rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.08em;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 5.5vw, 8.75rem);   /* 72 → 140px */
  --section-y-tight: clamp(3rem, 2rem + 3.5vw, 5.5rem); /* 48 → 88px */

  /* --- Layout --- */
  --container: 1280px;
  --container-wide: 1680px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --header-h: 84px;
  --radius: 7px;
  --radius-lg: 18px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(24, 26, 27, 0.06), 0 2px 8px rgba(24, 26, 27, 0.05);
  --shadow-md: 0 8px 30px rgba(24, 26, 27, 0.10);
  --shadow-lg: 0 24px 60px rgba(24, 26, 27, 0.16);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.9s;

  --z-header: 1000;
  --z-sidenav: 900;
  --z-overlay: 1100;
  --z-modal: 1200;
}