/* ==========================================================================
   LETSPACT — variables.css
   Central design tokens: color, type, spacing, motion, layout
   ========================================================================== */

:root {
  /* --- Brand colors (official LETSPACT digital palette) --- */
  --charcoal: #001a21;
  --royal-green: #003928;
  --light-green: #b0c9ab;
  --burgundy: #731f25;
  --light-burgundy: #eab5af;
  --coral: #e29986;
  --light-coral: #f2e5dd;
  --white: #ffffff;

  /* --- Semantic tokens --- */
  --bg: var(--charcoal);
  --bg-alt: var(--royal-green);
  --bg-light: var(--light-coral);
  --bg-white: var(--white);

  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.66);
  --text-on-light: var(--charcoal);
  --text-on-light-muted: rgba(0, 26, 33, 0.62);

  --accent: var(--coral);
  --accent-soft: var(--light-coral);
  --accent-deep: var(--burgundy);
  --accent-green: var(--light-green);

  --line-on-dark: rgba(255, 255, 255, 0.14);
  --line-on-light: rgba(0, 26, 33, 0.12);

  /* --- Typography --- */
  --font-body: "Century Gothic Pro", "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-display: "Migra", "Playfair Display", "Times New Roman", Georgia, serif;
  --font-ar: "Aeonik Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h2: clamp(2rem, 1.4rem + 3vw, 4rem);
  --fs-h1: clamp(2.6rem, 1.4rem + 6vw, 7rem);
  --fs-display: clamp(3rem, 1rem + 10vw, 9.5rem);

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.55;

  --ls-tight: -0.02em;
  --ls-wide: 0.18em;

  /* --- Spacing scale --- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(5rem, 3rem + 8vw, 10rem);

  /* --- Layout --- */
  --container: 1360px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --header-h: 84px;
  --radius: 4px;
  --radius-lg: 10px;

  /* --- 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;

  /* --- Elevation (used sparingly) --- */
  --shadow-soft: 0 30px 60px -30px rgba(0, 26, 33, 0.45);

  --z-header: 100;
  --z-menu: 200;
  --z-top: 300;
}