/* ==========================================================================
   EDUCOUNN — DESIGN TOKENS
   Central source of truth for colour, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---------- Colour ---------- */
  --color-primary: #0b3d2e;          /* deep editorial green — trust, education */
  --color-primary-dark: #072a20;
  --color-primary-light: #145c44;
  --color-secondary: #0f1b2d;        /* near-black navy for headings/footer */
  --color-accent: #c9973f;           /* restrained gold — premium accent, CTAs */
  --color-accent-dark: #a97c2f;

  --color-background: #ffffff;
  --color-background-alt: #f7f5f0;   /* warm off-white */
  --color-surface: #ffffff;
  --color-surface-dark: #0f1b2d;

  --color-text: #16211c;
  --color-text-muted: #5b6b63;
  --color-text-inverse: #f5f3ee;
  --color-border: #e3e0d6;
  --color-border-dark: rgba(245, 243, 238, 0.14);

  --color-white: #ffffff;
  --color-success: #1e7f4f;
  --color-error: #b3312c;

  /* ---------- Typography ---------- */
  --font-heading: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 3.2rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.9rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

  --lh-heading: 1.12;
  --lh-body: 1.65;

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

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ---------- Spacing scale ---------- */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 120px;

  /* ---------- Layout ---------- */
  --container-max: 1360px;
  --container-pad: 24px;
  --header-height: 88px;
  --header-height-scrolled: 68px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 27, 45, 0.14);
  --shadow-header: 0 1px 0 rgba(15, 27, 45, 0.06), 0 8px 20px rgba(15, 27, 45, 0.04);

  /* ---------- Motion ---------- */
  --transition-fast: 200ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms ease-out;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Breakpoints (reference only, used in media queries) ---------- */
  --bp-xl: 1280px;
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 480px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms linear;
    --transition-normal: 1ms linear;
    --transition-slow: 1ms linear;
  }
}