/* ==========================================================================
   Care+ Pediatrics — Design Tokens
   Visual direction cloned from sakai-kids-dc.com:
   soft pastel palette, warm cream backgrounds, teal accent, rounded shapes.
   Westernized: fewer floating decorations, cleaner surfaces.
   ========================================================================== */

:root {
  /* --- Brand palette -------------------------------------------------- */
  /* Teal is the primary action color (CTAs, links). Coral + sky are warm
     pediatric accents. Cream is the page canvas. */
  /* Brand blue — sampled from the Care+ logo (#26AAE2). Deeper steps keep
     white-on-blue button/text contrast accessible. */
  --color-teal-700: #0F6FA3; /* dark blue — text/hover */
  --color-teal-600: #1287C1; /* primary fill */
  --color-teal-500: #26AAE2; /* logo blue — accents/borders */
  --color-teal-100: #CFEAF8; /* light tint */
  --color-teal-50:  #EAF6FD; /* faint tint / section wash */

  /* Brand red — sampled from the Care+ logo (#D81F3D). */
  --color-coral-600: #B81730;
  --color-coral-500: #D81F3D;
  --color-coral-100: #FBE0E5;

  --color-sky-500: oklch(74% 0.09 235);
  --color-sky-100: oklch(94% 0.035 235);

  --color-sun-400: oklch(85% 0.11 88);
  --color-sun-100: oklch(96% 0.04 90);

  /* Periwinkle / lavender — the reference's playful section canvas */
  --color-lav-200: oklch(88% 0.045 280);
  --color-lav-100: oklch(92% 0.032 282);
  --color-lav-50:  oklch(95.5% 0.02 284);

  /* Hex mirrors used inside inline SVG cloud fills (SVG can't read vars) */
  --hex-white: #ffffff;
  --hex-cream: #fbf9f3;
  --hex-teal:  #e4f3f0;
  --hex-lav:   #e7e9f7;
  --hex-sun:   #fbf3dc;

  --border-dash: oklch(84% 0.02 250);

  /* --- Semantic surfaces ---------------------------------------------- */
  --color-bg:        oklch(99.1% 0.005 85);   /* warm off-white, lifted toward white */
  --color-surface:   oklch(100% 0 0);         /* card white */
  --color-surface-2: oklch(97% 0.012 190);    /* tinted panel */

  --color-primary:      var(--color-teal-600);
  --color-primary-dark: var(--color-teal-700);
  --color-primary-soft: var(--color-teal-100);
  --color-accent:       var(--color-coral-500);
  --color-accent-soft:  var(--color-coral-100);

  /* --- Text ----------------------------------------------------------- */
  --color-text:      oklch(34% 0.012 250);   /* medium gray, never pure black */
  --color-text-soft: oklch(48% 0.014 250);
  --color-text-mute: oklch(60% 0.012 250);
  --color-on-primary: oklch(99% 0 0);

  --color-border: oklch(90% 0.012 200);
  --color-ring:   rgb(38 170 226 / 0.55);

  /* --- Typography ----------------------------------------------------- */
  --font-display: "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.7vw, 1.6rem);
  --text-2xl:  clamp(1.75rem, 1.45rem + 1.3vw, 2.35rem);
  --text-3xl:  clamp(2.15rem, 1.6rem + 2.4vw, 3.4rem);
  --text-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.4rem);

  --leading-tight: 1.18;
  --leading-snug: 1.4;
  --leading-normal: 1.7;

  /* --- Spacing & rhythm ----------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);

  --container: 1200px;
  --container-narrow: 820px;

  /* --- Radii (rounded everything, no hard 90° corners) ---------------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 46% 54% 52% 48% / 55% 46% 54% 45%;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 2px 8px oklch(60% 0.03 210 / 0.10);
  --shadow-md: 0 12px 30px oklch(55% 0.04 210 / 0.12);
  --shadow-lg: 0 24px 60px oklch(50% 0.05 210 / 0.16);
  --shadow-teal: 0 14px 28px oklch(60% 0.10 190 / 0.30);

  /* --- Motion --------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.5, 1);

  --header-h: 76px;
}