/* ═══════════════════════════════════════════════════
   MMC Design System — CSS Custom Properties
   Sampled from mmc-logo.png —brand-700 = #18a89e
   Aesthetic: Generations (warm, editorial) × Grow (bold structure)
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Colour ramp ─────────────────────────────────── */
  --brand-900: #0d5c57;   /* dark teal — text on light, button bg */
  --brand-700: #18a89e;   /* MMC teal — logo, accents, decorative */
  --brand-500: #2ec4ba;   /* mid teal — hover states */
  --brand-100: #d4f0ee;   /* light teal — subtle backgrounds */
  --brand-50:  #eef7f6;   /* near-white teal — page sections */

  --accent-500: #e8a24a;  /* warm amber — sparing highlights on dark/teal */
  --accent-600: #d4912e;  /* darker amber for hover */

  --ink-900: #15302e;     /* warm near-black — headings */
  --ink-700: #2a4543;     /* dark — subheadings */
  --ink-600: #4a5a58;     /* medium — body text */
  --ink-500: #5d6c6a;     /* medium-dark — creds, secondary */
  --ink-400: #6d7b79;     /* light — captions, meta */
  --ink-200: #b8c2c0;     /* very light — disabled, borders */

  --cream-50: #faf7f2;    /* warm neutral — page background */
  --surface:  #ffffff;    /* card / content bg */
  --line:     #e7e2d9;    /* dividers, borders */

  /* ── Typography ──────────────────────────────────── */
  --ff-display: 'Lora', 'Georgia', 'Times New Roman', serif;
  --ff-body:    'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero:    clamp(2.4rem, 5vw, 4rem);
  --fs-h1:      clamp(2rem, 4vw, 3rem);
  --fs-h2:      clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3:      1.35rem;
  --fs-h4:      1.15rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight:   1.2;
  --lh-heading: 1.25;
  --lh-body:    1.65;

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

  /* ── Spacing (4px scale) ─────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Shape ───────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   28px;
  --r-pill: 999px;

  --shadow-card:  0 6px 24px rgba(16, 48, 46, 0.08);
  --shadow-soft:  0 2px 12px rgba(16, 48, 46, 0.06);
  --shadow-hover: 0 8px 32px rgba(16, 48, 46, 0.12);

  /* ── Layout ──────────────────────────────────────── */
  --content-width:  720px;
  --wide-width:     1120px;
  --page-padding:   clamp(1rem, 4vw, 2rem);

  /* ── Motion ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --duration:   200ms;
  --duration-slow: 350ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}