/* ============================================================
   Signorina Kosmetikstudio, Hamburg-Wandsbek
   Design tokens, "elegant / soft beauty" Blush + Bronze
   ============================================================ */

:root {
  /* ---- Color: soft blush/cream base, espresso ink, bronze/rose accent ---- */
  --color-porcelain: oklch(97.5% 0.012 40);
  --color-cream: oklch(95.5% 0.02 35);
  --color-sand: oklch(92% 0.028 32);
  --color-shell: oklch(89% 0.035 30);

  --color-ink: oklch(28% 0.025 40);
  --color-ink-soft: oklch(42% 0.025 38);
  --color-mute: oklch(56% 0.02 38);

  /* "clay" slot = warm bronze/rose primary */
  --color-clay: oklch(58% 0.08 45);
  --color-clay-deep: oklch(47% 0.08 42);
  --color-clay-tint: oklch(92% 0.035 40);
  /* "sage" slot = soft dusty rose secondary */
  --color-sage: oklch(66% 0.07 20);
  --color-sage-tint: oklch(93% 0.03 24);

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

  /* ---- Surfaces / semantic ---- */
  --bg: var(--color-porcelain);
  --bg-alt: var(--color-cream);
  --surface: oklch(99% 0.006 40);
  --text: var(--color-ink);
  --text-soft: var(--color-ink-soft);
  --accent: var(--color-clay);

  /* ---- Typography ---- */
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-body: "Jost", 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.3rem);
  --text-hero: clamp(2.8rem, 1.4rem + 5vw, 6rem);

  --leading-tight: 1.04;
  --leading-snug: 1.12;
  --leading-body: 1.7;

  --tracking-tight: 0.005em;
  --tracking-wide: 0.22em;
  --tracking-wider: 0.4em;

  --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: 60ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --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 40 / 0.05), 0 4px 12px oklch(40% 0.03 40 / 0.05);
  --shadow: 0 4px 14px oklch(40% 0.04 38 / 0.07), 0 18px 50px oklch(40% 0.05 35 / 0.08);
  --shadow-lg: 0 10px 30px oklch(38% 0.05 35 / 0.1), 0 40px 90px oklch(38% 0.06 32 / 0.12);
}