/* =====================================================
   EVA CLINIC — DESIGN TOKENS
   Single source of truth for color, type, spacing, shadow,
   radius and breakpoints. Every stylesheet on the site reads
   from these custom properties instead of hard-coded values.
===================================================== */

:root {
  /* ---------- Color: premium medical-luxury palette ---------- */
  --color-bg: #faf7f1;              /* warm ivory */
  --color-surface: #ffffff;         /* card / panel surface */
  --color-surface-alt: #f4efe4;     /* soft neutral section bg */
  --color-ink: #1c1c1a;             /* deep charcoal text */
  --color-ink-soft: #4a4a46;        /* secondary text */
  --color-muted: #8a8578;           /* tertiary / captions */
  --color-border: #e7e0d2;          /* hairline borders */

  --color-primary: #0f3d38;         /* deep emerald — brand anchor */
  --color-primary-light: #14544c;
  --color-primary-soft: #eaf2f0;    /* tinted surface on primary */

  --color-accent: #b58a3d;          /* champagne gold */
  --color-accent-light: #d4b06a;
  --color-accent-soft: #f6ecd8;

  --color-on-dark: #f8f5ec;

  /* ---------- Type ---------- */
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif;

  --fs-h1: clamp(2.4rem, 4.4vw, 4rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* ---------- Spacing scale ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* ---------- Shape / elevation ---------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(28, 28, 26, 0.06);
  --shadow-md: 0 14px 40px rgba(28, 28, 26, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 61, 56, 0.16);

  --container-width: 1200px;
  --container-narrow: 800px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 96px;
}

/* Respect user motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}