/* ==========================================================================
   Naturheilpraxis Martina Pohlmann – Design-Tokens
   Farbwelt und Typografie abgeleitet aus der Seminar-Broschüre (08/2025)
   und den Stil-Referenzen. Alle Schriften lokal, keine externen Dienste.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2-variations'),
       url('../fonts/jost-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corinthia';
  src: url('../fonts/corinthia-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-var.woff2') format('woff2-variations'),
       url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Farbwelt ---------- */
  --creme:        #FDF9F3;  /* Grundfläche, warmes Papierweiß */
  --creme-tief:   #F8F0E4;  /* zweite Fläche, Abschnittswechsel */
  --apricot-hell: #FAE6D5;  /* zarte Verläufe, Karten */
  --apricot:      #F1CCAC;  /* Akzentflächen */
  --apricot-tief: #DFA379;  /* Hover, kleine Akzente */
  --gold-zart:    #E3D2B0;  /* Haarlinien */
  --gold:         #BE9A55;  /* Akzentlinien, Zahlen, Zierrat */
  --gold-tief:    #96763C;  /* Text auf Gold, Fokus */
  --rose:         #C07E92;  /* sparsamer Akzent (aus Broschürenlinie) */
  --tinte:        #3B342E;  /* Fließtext, warmes Anthrazit */
  --tinte-zart:   #6E635A;  /* Sekundärtext */
  --weiss:        #FFFDFA;

  /* ---------- Typografie ---------- */
  --schrift-versal: 'Jost', 'Avenir Next', 'Century Gothic', sans-serif;
  --schrift-text:   'Lato', -apple-system, 'Segoe UI', sans-serif;
  --schrift-schreib:'Corinthia', 'Segoe Script', cursive;
  --schrift-serif:  'Cormorant', Georgia, serif;

  /* Fließende Größen (clamp = ohne Sprünge von Mobil zu Desktop) */
  --t-akzent:  clamp(2.75rem, 7vw,  5rem);     /* Schreibschrift */
  --t-h1:      clamp(1.75rem, 4.2vw, 3.1rem);
  --t-h2:      clamp(1.35rem, 2.6vw, 2rem);
  --t-h3:      clamp(1.05rem, 1.5vw, 1.25rem);
  --t-text:    clamp(1rem, 0.35vw + 0.95rem, 1.125rem);
  --t-klein:   0.8125rem;

  --sperrung-weit: 0.28em;   /* Versal-Überschriften */
  --sperrung-mittel: 0.18em;
  --sperrung-eng: 0.09em;

  /* ---------- Raster & Raum ---------- */
  --breite-text: 62ch;
  --breite-inhalt: 1180px;
  --breite-schmal: 800px;
  --raum-abschnitt: clamp(4.5rem, 9vw, 9rem);
  --raum-l: clamp(2rem, 4vw, 3.5rem);
  --raum-m: 1.5rem;
  --raum-s: 0.75rem;
  --rand: clamp(1.25rem, 5vw, 3.5rem);

  /* ---------- Bewegung ---------- */
  --ruhig: 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  --sanft: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

  --schatten-zart: 0 1px 2px rgba(150, 118, 60, 0.04),
                   0 12px 32px -12px rgba(150, 118, 60, 0.14);
  --schatten-bild: 0 24px 60px -28px rgba(90, 66, 38, 0.30);
}