/* Salon Vesna · tokens.css
   Ausgangspunkt: lab/fundus/rezepte/friseur-salon-handschrift/tokens.css (Stand 02.11.2026).
   Ergänzt: font-stretch-Bereich für Kalnia (sonst greift font-stretch nicht auf die wdth-Achse),
   Schließdauern, Schriftgrößen, Fokus, Platzhalter-Töne für Bildflächen.
   style.css nutzt nur diese Variablen. */

@font-face { font-family: 'Kalnia'; src: url('../../../../assets/fonts/kalnia-latin-full-normal.woff2') format('woff2'); font-weight: 100 700; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../../../../assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
/* OFL mit Reserved Font Name: unverändert einbinden, nur dort, wo Teamkarten stehen (style.css lädt sie nicht vor) */
@font-face { font-family: 'Mrs Saint Delafield'; src: url('../../../../assets/fonts/mrs-saint-delafield-latin-400-normal.woff') format('woff'); font-weight: 400; font-display: swap; }

:root {
  /* Schrift (Rezept: schrift.groessen) */
  --schrift-headline: 'Kalnia', Georgia, serif;
  --schrift-text: 'Familjen Grotesk', system-ui, sans-serif;
  --schrift-akzent: 'Mrs Saint Delafield', cursive;
  --h1: clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem);
  --h1-breite: 112%;
  --h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --h3: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  --text: 1.0625rem;
  --text-klein: .9375rem;
  --label: .8125rem;
  --unterschrift: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  --mass: 62ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe: Puder, Espresso, ein Lackrot nur für „Termin buchen“ und aktive Zustände */
  --farbe-grund: #F4E9E4;   /* Puder */
  --farbe-grund-2: #1E1412; /* Espresso: Text, dunkle Flächen (15 : 1 auf Puder) */
  --farbe-signal: #9B1D2E;  /* Lackrot (6,8 : 1 auf Puder) */
  --farbe-flaeche: #E9DBD4; /* Preisliste, Band, Termin */
  --farbe-text: #6E5A55;    /* Meta (5,4 : 1 auf Puder) */
  --farbe-linie: #D9C8C0;
  --farbe-auf-dunkel: #F4E9E4;
  --farbe-auf-dunkel-leise: #C9B4AC; /* Meta auf Espresso (8,9 : 1) */
  --farbe-linie-dunkel: #4A3A36;
  --farbe-feld-rand: #8C7670;        /* Feldrahmen (3,6 : 1 auf Puder, WCAG 1.4.11) */

  /* Bewegung: token-studio-signatur, eine Kurve für alles */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-ein: var(--ease);
  --ease-aus: var(--ease);
  --dauer-xs: 250ms;      /* Farbe, Hover */
  --dauer-s: 400ms;       /* Menü, Reiter, Unterstreichung, Popover */
  --dauer-button: 475ms;  /* Button-Fläche von unten */
  --dauer-m: 525ms;
  --dauer-l: 725ms;       /* nur Wurf der Look-Karten und Hero-Bild */
  --aus-faktor: 0.65;     /* Schließen = Öffnen × Faktor (Menü 400 → 260) */
  --dauer-s-aus: calc(var(--dauer-s) * var(--aus-faktor));
  --dauer-button-aus: calc(var(--dauer-button) * var(--aus-faktor));
  --stagger: 40ms;

  /* Raum */
  --raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px; --raum-5: 24px;
  --raum-6: 32px; --raum-7: 48px; --raum-8: 64px; --raum-9: 96px; --raum-10: 136px;
  --raum-sektion: clamp(64px, 8vw, 120px);

  /* Raster */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1360px;

  /* Form */
  --radius-klein: 8px;
  --radius-gross: 16px;
  --radius-button: 999px;
  --linie-staerke: 1px;
  --schatten-karte: 0 1px 2px rgb(30 20 18 / .08), 0 18px 36px -18px rgb(30 20 18 / .45); /* nur Look-Karten */

  /* Buttons */
  --button-hoehe: 48px;
  --button-hoehe-klein: 44px;
  --fokus-ring: 2px solid var(--farbe-signal);
  --fokus-abstand: 3px;

  /* Platzhalter-Töne der Bildflächen (bis echte Fotos kommen, siehe bilder.json) */
  --ton-honig: #C9965E;
  --ton-kupfer: #A9583A;
  --ton-asch: #7D6A5E;
  --ton-beige: #D6BFA2;
  --ton-dunkel: #3E2C25;
  --ton-haut: #CFA690;

  /* Ergänzt 02.11.2026 (Mehrseiter, Neubau): Titelgrößen der Seitenköpfe, Raumfarben für den Farbwechsel beim Scrollen,
     Seitenwechsel. Riesentitel nach Leitfaden A3 eng gesetzt; größer als rezept.h1, weil der Salonname allein auf zwei Zeilen steht. */
  --titel-riesig: clamp(3.5rem, 1rem + 10.5vw, 11rem);
  --titel-seite: clamp(2.75rem, 1.2rem + 6vw, 7.5rem);
  --titel-text: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  --satz-gross: clamp(2rem, .9rem + 4.4vw, 5.25rem);
  --hg: var(--farbe-grund);              /* Raumfarbe, wechselt bei data-thema="dunkel" */
  --vg: var(--farbe-grund-2);            /* Vordergrund */
  --vg-leise: var(--farbe-text);         /* Meta, 5,4 : 1 auf Puder */
  --linie: var(--farbe-linie);
  --dauer-wechsel: var(--dauer-m);       /* Seitenwechsel 525 ms, Schließen/Zurück gleich lang (Weg ist gleich) */
  --kopf-hoehe: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; }
}