/* ============================================================
   MMHSG Design Tokens
   Colours come from logo.svg. Type and spacing are fluid.
   No pill or circle radii: corners are square or softly rounded.
   ============================================================ */

:root {
  /* ---- Brand colours (from logo.svg) ---- */
  --color-navy: #2C4690;
  --color-blue: #3D60A7;
  --color-teal: #108084;
  --color-navy-deep: #182E76;
  --color-paper: #FDFDFE;

  /* ---- Tints ---- */
  --color-navy-tint: rgba(44, 70, 144, 0.07);
  --color-teal-tint: rgba(16, 128, 132, 0.10);
  --color-teal-tint-strong: rgba(16, 128, 132, 0.15);

  /* ---- Warm accent (adds human warmth) ---- */
  --color-warm: #FDF6EE;
  --color-warm-mid: #F5E6D3;
  --color-warm-accent: #E8955A;   /* borders and fills only */
  --color-warm-text: #9A4B16;     /* readable text on warm backgrounds */

  /* ---- Text ---- */
  --color-charcoal: #333333;
  --color-muted: #566274;
  --color-white: #FFFFFF;

  /* ---- Surfaces ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8F9FC;
  --color-border: #E2E8F0;

  /* ---- Typography (one family, loaded via <link> in each page) ---- */
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-xs: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-sm: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  --text-hero: clamp(2.25rem, 1.5rem + 3.75vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --section-pad: clamp(3rem, 6vw + 1rem, 7rem);

  /* ---- Container ---- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 4.5rem);
  --prose-max: 65ch;

  /* ---- Radii: soft, never round ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(24, 46, 118, 0.06);
  --shadow-header: 0 1px 4px rgba(24, 46, 118, 0.10);

  /* ---- Motion ---- */
  --ease-out: ease-out;
  --ease-menu: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-reveal: 500ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-menu: 300;
  --z-skip: 500;

  /* ---- Header ---- */
  --header-h: clamp(72px, 8vw, 110px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-reveal: 0ms;
  }
}