/* ==========================================================================
   FERIZA Beauty & Hair — Design Tokens
   Die einzige Quelle für Farben, Typografie, Abstände und Bewegung.
   Alle anderen Styles referenzieren nur diese Variablen.
   Dokumentation: styleguide.html
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, DSGVO-freundlich) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Markenfarben (aus Logo & Briefing) ---------- */
  --c-creme:      #F7EBE1;  /* Seitenhintergrund, Grundton */
  --c-paper:      #FBF6F1;  /* Karten, helle Flächen auf Creme */
  --c-beige:      #EAD9CA;  /* Wechsel-Sektionen, Flächen */
  --c-sand:       #D9C3AF;  /* Linien & Rahmen auf Beige */
  --c-gold:       #AD8245;  /* Akzent: Linien, Stern, Icons – NICHT für kleinen Text auf hell */
  --c-gold-light: #D2A968;  /* Gold auf dunklem Grund (auch für Text) */
  --c-gold-text:  #7A5826;  /* Gold-Ton für kleinen Text auf hellem Grund (AA-konform) */
  --c-ink:        #171615;  /* Schwarz: Headlines, Text, Primär-Button */
  --c-ink-soft:   #5A5048;  /* Fließtext sekundär, Beschreibungen */
  --c-espresso:   #1C1917;  /* Dunkle Sektionen */
  --c-espresso-2: #2A2420;  /* Flächen auf Dunkel */

  /* ---------- Semantische Farben ---------- */
  --bg:           var(--c-creme);
  --surface:      var(--c-paper);
  --surface-alt:  var(--c-beige);
  --text:         var(--c-ink);
  --text-muted:   var(--c-ink-soft);
  --accent:       var(--c-gold);
  --accent-text:  var(--c-gold-text);
  --border:       rgba(23, 22, 21, 0.12);
  --border-strong:rgba(23, 22, 21, 0.28);
  --on-dark:      var(--c-creme);
  --on-dark-muted:rgba(247, 235, 225, 0.68);
  --border-dark:  rgba(247, 235, 225, 0.16);

  /* ---------- Typografie ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Futura", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(2.9rem, 1.6rem + 5.6vw, 6.75rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  --fs-h2:      clamp(2.15rem, 1.55rem + 2.4vw, 3.6rem);
  --fs-h3:      clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h4:      1.25rem;
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-micro:   0.75rem;     /* 12px – Eyebrows, Labels */

  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-body:    1.7;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  --ls-eyebrow: 0.32em;      /* wie „B E A U T Y  &  H A I R“ im Logo */
  --ls-button:  0.2em;
  --ls-heading: -0.01em;

  /* ---------- Abstände (4px-Raster) ---------- */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-10: 8rem;    /* 128 */

  --section-y:  clamp(5rem, 3.2rem + 7vw, 9.5rem);
  --gutter:     clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --container:  76rem;       /* 1216px */
  --container-narrow: 52rem; /* 832px – Preise, Rechtstexte */

  /* ---------- Formen ---------- */
  --radius-s:    2px;
  --radius-m:    6px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 0 0; /* Bogen – Echo der A-Kurve im Logo */

  --line:        1px;
  --shadow-soft: 0 30px 60px -32px rgba(60, 38, 18, 0.35);
  --shadow-card: 0 18px 40px -28px rgba(60, 38, 18, 0.35);

  /* ---------- Bewegung ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    200ms;
  --dur-base:    450ms;
  --dur-slow:    900ms;
  --dur-reveal:  1100ms;
  --stagger:     90ms;

  /* ---------- Ebenen ---------- */
  --z-header: 50;
  --z-menu:   60;
  --z-bar:    40;
}