/* Hallmark · tokens · theme: custom (ENDLICH ICH – seelenfrech.)
 * Struktur + Typo + Abstände 1:1 aus landingpage-webinar/tokens.css (Seelenkraft).
 * Palette aus dem Club-Flyer: Creme, Bordeaux, Blush, Rosmarin-Salbei.
 */
:root {
  /* — Brand colour — */
  --color-paper:        oklch(97.3% 0.012 70);   /* Creme */
  --color-paper-warm:   oklch(94.2% 0.02 55);    /* warmes Sand-Creme für Wechselflächen */
  --color-surface:      oklch(99.3% 0.005 70);   /* fast Weiß, warm getönt */
  --color-berry:        oklch(39.5% 0.125 4);    /* Bordeaux – Akzent, Buttons, starke Flächen */
  --color-berry-2:      oklch(46% 0.13 4);       /* Bordeaux hover */
  --color-blush:        oklch(86% 0.04 10);      /* Rosé – nur Details */
  --color-sage:         oklch(62% 0.045 145);    /* Rosmarin – dekorativ, nie Text */

  /* — Derived roles — */
  --color-ink:          oklch(27% 0.04 10);
  --color-ink-2:        oklch(40% 0.035 12);
  --color-muted:        oklch(47% 0.028 20);
  --color-rule:         oklch(88% 0.02 40);
  --color-rule-strong:  oklch(76% 0.03 30);
  --color-on-berry:     var(--color-paper);
  --color-on-berry-2:   oklch(88% 0.035 15);
  --color-rule-berry:   oklch(52% 0.1 6);
  --color-focus:        oklch(45% 0.15 5);
  --color-focus-berry:  var(--color-paper);
  --color-error:        oklch(48% 0.16 30);
  --color-nav-glass:    oklch(97.3% 0.012 70 / 0.82);
  --color-shadow:       oklch(27% 0.04 10 / 0.16);
  --color-placeholder:  oklch(91% 0.018 50);
  --color-backdrop:     oklch(27% 0.04 10 / 0.55);

  /* — Type (identisch zur Webinar-Seite) — */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body:    "Epilogue", "Helvetica Neue", Arial, sans-serif;

  --text-sm:        0.875rem;
  --text-base:      clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:        clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:        clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl:       clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --text-display:   clamp(3rem, 1.4rem + 7vw, 7rem);

  /* — Space (4pt) — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: clamp(5rem, 3rem + 8vw, 10rem);
  --page-gutter: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  --measure: 62ch;

  /* — Shape & lines — */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* — Motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  520ms;
}