/* ============================================================
   Zahnarztpraxis Dr. Anna Heimer, Hamburg-Dulsberg
   Design tokens, "warm / elegant / natürliche Ästhetik"
   (gemeinsame Variablennamen; Werte = Champagner/Ivory + Gold)
   ============================================================ */

:root {
  /* ---- Color: warm ivory base, soft taupe ink, muted gold accent ---- */
  --color-porcelain: oklch(98% 0.01 85);
  --color-cream: oklch(96% 0.016 82);
  --color-sand: oklch(93% 0.022 80);
  --color-shell: oklch(90% 0.028 75);

  --color-ink: oklch(30% 0.018 60);
  --color-ink-soft: oklch(43% 0.018 60);
  --color-mute: oklch(56% 0.015 60);

  /* "clay" slot = muted warm gold/ochre primary */
  --color-clay: oklch(62% 0.085 75);
  --color-clay-deep: oklch(50% 0.085 70);
  --color-clay-tint: oklch(93% 0.035 80);
  /* "sage" slot = soft eucalyptus secondary */
  --color-sage: oklch(60% 0.04 160);
  --color-sage-tint: oklch(93% 0.022 160);

  --color-line: oklch(88% 0.016 75);
  --color-line-soft: oklch(92% 0.012 78);

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

  /* ---- Typography ---- */
  --font-display: "Cormorant", "Georgia", serif;
  --font-body: "Albert 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.7rem, 1.2rem + 1.8vw, 2.6rem);
  --text-2xl: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  --text-hero: clamp(2.9rem, 1.4rem + 5vw, 6rem);

  --leading-tight: 1.02;
  --leading-snug: 1.1;
  --leading-body: 1.66;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.18em;
  --tracking-wider: 0.34em;

  /* ---- Spacing rhythm ---- */
  --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: 1240px;
  --maxw-text: 62ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --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);

  /* ---- Shadows: warm, soft ---- */
  --shadow-sm: 0 1px 2px oklch(40% 0.02 70 / 0.05), 0 4px 12px oklch(40% 0.02 70 / 0.05);
  --shadow: 0 4px 14px oklch(40% 0.03 65 / 0.07), 0 18px 50px oklch(40% 0.04 60 / 0.08);
  --shadow-lg: 0 10px 30px oklch(38% 0.04 60 / 0.1), 0 40px 90px oklch(38% 0.05 55 / 0.12);
}