:root {
  /* ===== COLOR SYSTEM ===== */
  /* Redesigned toward a premium SaaS/startup palette (HAER-inspired):
     dark neutral headings, a single selective blue accent for CTA/brand
     moments, and a dominant white/light surface. CEFAT's own brand,
     content, and modules are unchanged — only the visual system moved. */
  --primary: #101828;          /* dark heading + high-contrast surfaces (footer) */
  --primary-light: #1D2939;
  --secondary: #2F80ED;        /* primary blue - CTA, links, highlights, active state */
  --secondary-dark: #2368C9;
  --accent: #FFBE18;           /* accent - badges, emoji-CTA highlights */
  --accent-soft: #FFF6DC;

  --background: #FFFFFF;       /* dominant white page background */
  --surface: #FFFFFF;          /* card / panel background */
  --surface-alt: #F7F8FA;      /* very light neutral for alternating sections */

  --text: #202020;             /* body text */
  --text-muted: #5B5D66;       /* secondary / supporting text */
  --text-faint: #8A8C94;

  --border: #E9E9EB;
  --border-strong: #D8D8DA;

  --success: #1F9D55;
  --error: #E0483E;

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.25rem, 4.2vw, 3rem);       /* hero: 36-40px mobile -> 48px desktop */
  --fs-h2: clamp(1.75rem, 2.4vw, 2rem);        /* section heading: 28px mobile -> 32px desktop */
  --fs-h3: 1.125rem;                            /* feature title: 18px */
  --fs-h4: 1.125rem;
  --fs-body-lg: 1rem;
  --fs-body: 0.875rem;                          /* body: 14px */
  --fs-small: 0.875rem;                         /* small label: 14px */
  --fs-xs: 0.75rem;

  --lh-hero: 1.25;              /* 60px / 48px */
  --lh-tight: 1.15;
  --lh-snug: 1.4;                /* section heading / feature title: 140% */
  --lh-normal: 1.4;              /* body: 140% */

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

  /* ===== LAYOUT ===== */
  --container-width: 1200px;
  --container-padding: 24px;
  --section-spacing: 120px;
  --section-spacing-sm: 80px;

  /* ===== RADIUS & SHADOW ===== */
  --radius-sm: 6px;             /* buttons */
  --radius-md: 16px;            /* cards */
  --radius-lg: 24px;            /* large cards / CTA band */
  --radius-pill: 999px;         /* pills / eyebrow chips only */

  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 20px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 36px rgba(16, 24, 40, 0.10);

  /* ===== TRANSITIONS ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.4s var(--ease-out);
  --transition-slow: 0.7s var(--ease-out);

  /* ===== Z-INDEX ===== */
  --z-nav: 100;
  --z-modal: 200;
}

@media (max-width: 1199px) and (min-width: 810px) {
  :root {
    --section-spacing: 96px;
    --section-spacing-sm: 64px;
  }
}

@media (max-width: 809px) {
  :root {
    --section-spacing: 72px;
    --section-spacing-sm: 56px;
    --container-padding: 20px;
  }
}