/* ============================================================
   Hausarztpraxis Wenta-Bralla & Seebacher, Hamburg-Wandsbek
   Design tokens, "freundlich / zugewandt" Koralle + Teal
   ============================================================ */

:root {
  /* ---- Color: warm white base, deep teal ink, coral accent ---- */
  --color-porcelain: oklch(98% 0.008 60);
  --color-cream: oklch(96% 0.014 55);
  --color-sand: oklch(93% 0.02 50);
  --color-shell: oklch(90% 0.03 35);

  --color-ink: oklch(30% 0.04 220);
  --color-ink-soft: oklch(43% 0.035 215);
  --color-mute: oklch(56% 0.025 210);

  /* "clay" slot = warm coral primary */
  --color-clay: oklch(66% 0.14 35);
  --color-clay-deep: oklch(56% 0.15 32);
  --color-clay-tint: oklch(93% 0.045 40);
  /* "sage" slot = teal secondary */
  --color-sage: oklch(60% 0.08 200);
  --color-sage-tint: oklch(93% 0.035 200);

  --color-line: oklch(89% 0.014 60);
  --color-line-soft: oklch(92% 0.01 60);

  /* ---- Surfaces / semantic ---- */
  --bg: var(--color-porcelain);
  --bg-alt: var(--color-cream);
  --surface: oklch(99.5% 0.004 60);
  --text: var(--color-ink);
  --text-soft: var(--color-ink-soft);
  --accent: var(--color-clay);

  /* ---- Typography ---- */
  --font-display: "Epilogue", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --text-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --text-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-2xl: clamp(2.2rem, 1.4rem + 3.3vw, 3.9rem);
  --text-hero: clamp(2.4rem, 1.3rem + 4.2vw, 5.2rem);

  --leading-tight: 1.05;
  --leading-snug: 1.12;
  --leading-body: 1.66;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.15em;
  --tracking-wider: 0.3em;

  --space-3xs: 0.4rem;
  --space-2xs: 0.7rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2.5rem;
  --space-lg: 4rem;
  --space-xl: 6.5rem;
  --space-section: clamp(5rem, 3.5rem + 6vw, 11rem);

  --maxw: 1200px;
  --maxw-text: 62ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --shadow-sm: 0 1px 2px oklch(40% 0.03 220 / 0.05), 0 4px 12px oklch(40% 0.03 220 / 0.05);
  --shadow: 0 4px 14px oklch(40% 0.04 220 / 0.07), 0 18px 50px oklch(40% 0.05 215 / 0.08);
  --shadow-lg: 0 10px 30px oklch(38% 0.05 215 / 0.1), 0 40px 90px oklch(38% 0.06 210 / 0.12);
}