/* ============================================================
   Praxis Dr. med. Violeta Doci, Augenheilkunde
   Design tokens, "Klarheit & Präzision" / cool clinical
   (Variablennamen aus dem gemeinsamen System; Werte = Petrol/Teal)
   ============================================================ */

:root {
  /* ---- Color: cool ice base, deep slate-teal ink, petrol accent ---- */
  --color-porcelain: oklch(98.5% 0.005 220);
  --color-cream: oklch(97% 0.008 215);
  --color-sand: oklch(94% 0.012 210);
  --color-shell: oklch(91% 0.02 205);

  --color-ink: oklch(27% 0.035 235);
  --color-ink-soft: oklch(40% 0.03 230);
  --color-mute: oklch(55% 0.02 225);

  /* "clay" slot = petrol primary accent */
  --color-clay: oklch(56% 0.105 210);
  --color-clay-deep: oklch(45% 0.11 218);
  --color-clay-tint: oklch(92% 0.04 205);
  /* "sage" slot = secondary cool/cyan note */
  --color-sage: oklch(62% 0.09 195);
  --color-sage-tint: oklch(93% 0.035 195);

  --color-line: oklch(88% 0.012 215);
  --color-line-soft: oklch(92% 0.01 215);

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

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Figtree", 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.4vw, 4rem);
  --text-hero: clamp(2.3rem, 1.2rem + 4.1vw, 5.2rem);

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

  --tracking-tight: -0.03em;
  --tracking-wide: 0.16em;
  --tracking-wider: 0.3em;

  /* ---- 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: 6rem;
  --space-section: clamp(5rem, 3.5rem + 6vw, 11rem);

  --maxw: 1280px;
  --maxw-text: 62ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 22px;
  --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: cool, crisp ---- */
  --shadow-sm: 0 1px 2px oklch(40% 0.04 225 / 0.06), 0 4px 12px oklch(40% 0.04 225 / 0.06);
  --shadow: 0 4px 14px oklch(40% 0.05 225 / 0.08), 0 18px 50px oklch(40% 0.06 225 / 0.09);
  --shadow-lg: 0 10px 30px oklch(38% 0.06 225 / 0.12), 0 40px 90px oklch(38% 0.07 225 / 0.14);
}