/* ==========================================================================
   ESPOOO design tokens
   Source of truth: 02_foundations/design-tokens.json → espooo-tokens.css.
   If the package tokens differ, update the values here only; components
   reference tokens, never raw values.
   ========================================================================== */

:root {
  /* --- Brand color ------------------------------------------------------ */
  --navy-900: #0F172A;   /* Deep navy — primary text, dark sections */
  --navy-800: #1E293B;
  --navy-700: #334155;
  --navy-600: #475569;
  --navy-500: #64748B;

  --purple-700: #5B3DF5; /* gradient end */
  --purple-650: #633CF3;
  --purple-600: #7C3AED; /* ESPOOO signature accent */
  --purple-500: #8B5CF6;
  --purple-100: #EDE9FE;
  --purple-50:  #F5F3FF;

  --cyan-400: #22D3EE;   /* used sparingly: single data pulse only */

  --white:    #FFFFFF;
  --off:      #F8FAFC;   /* off-white section background */
  --line:     #E5E7EB;   /* thin dividers, borders */
  --line-soft:#EEF1F5;

  /* --- Semantic --------------------------------------------------------- */
  --bg:            var(--white);
  --bg-alt:        var(--off);
  --bg-dark:       var(--navy-900);
  --fg:            var(--navy-900);
  --fg-muted:      rgba(15, 23, 42, .64);
  --fg-subtle:     rgba(15, 23, 42, .46);
  --fg-on-dark:    var(--white);
  --fg-on-dark-muted: rgba(255, 255, 255, .68);
  --border:        var(--line);
  --border-on-dark:rgba(255, 255, 255, .12);
  --accent:        var(--purple-600);
  --accent-strong: var(--purple-700);
  --accent-soft:   var(--purple-50);
  --focus:         var(--purple-600);

  --grad-accent: linear-gradient(135deg, #7C3AED 0%, #633CF3 50%, #5B3DF5 100%);

  /* --- Typography ------------------------------------------------------- */
  --font-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.375rem, 1.5rem + 3.2vw, 4rem);      /* 38 → 64 */
  --fs-h2:      clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);   /* 30 → 44 */
  --fs-h3:      clamp(1.25rem, 1.1rem + .5vw, 1.5rem);      /* 20 → 24 */
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);    /* 17 → 20 */
  --fs-body:    1.0625rem;                                  /* 17 */
  --fs-small:   .9375rem;                                   /* 15 */
  --fs-xs:      .8125rem;                                   /* 13 */

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  1.7;
  --lh-ar:    1.85;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 75rem;      /* 1200px */
  --container-wide: 85rem; /* 1360px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Shape & elevation ------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 24px 60px -30px rgba(15, 23, 42, .30);
  --shadow-purple: 0 16px 40px -20px rgba(124, 58, 237, .55);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 640ms;

  --header-h: 4.5rem;
}

@media (max-width: 767px) {
  :root {
    --header-h: 4rem;
    --fs-body: 1rem;
  }
}