/* =========================================================================
   YourMindBridge – Design Tokens & Schriften
   Schriftsystem (nach Claudias Regie):
   - Butler        → Display / Headlines / Vision / Kachel-Überschriften
   - Amalfi Coast  → NUR Portal-Sätze (Akzent, sparsam, gold/nude)
   - Raleway       → Fließtext
   - Montserrat    → Labels / Eyebrows / Navigation / Buttons (uppercase)
   ========================================================================= */

/* ---------- Schriften (self-hosted, woff2) ---------- */
@font-face {
  font-family: "Butler";
  src: url("../fonts/Butler-Free-Rmn.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Butler";
  src: url("../fonts/Butler-Free-Med.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Butler";
  src: url("../fonts/Butler-Free-Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amalfi Coast";
  src: url("../fonts/AmalfiCoast.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Allura";
  src: url("../fonts/Allura-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Emitha Script";
  src: url("../fonts/EmithaScript.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Font-Familien ---------- */
  --font-display: "Butler", Georgia, "Times New Roman", serif;
  --font-script:  "Allura", "Amalfi Coast", "Brush Script MT", cursive;
  --font-body:    "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-label:   "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Farbpalette (Markenwelt beibehalten – warm & edel) ---------- */
  --cream:        #faf6ef;  /* Haupt-Hintergrund */
  --cream-deep:   #f1e8da;  /* alternierende Sektionen */
  --sand:         #e7dac6;
  --taupe:        #8b7b6b;  /* rgb(139,123,107) */
  --taupe-light:  #b5ae9c;  /* rgb(181,174,156) */
  --espresso:     #4e453c;  /* dunkler Grund – minimal heller/wärmer */
  --gold:         #c18409;  /* rgb(193,132,9) – tiefes Gold */
  --champagne:    #debd84;  /* rgb(222,189,132) */
  --apricot:      #c39a6b;  /* Akzent für Portal-Sätze (Gold/Sand/Nude) */
  --ink:          #1a1a1a;  /* Headlines – Anthrazit */
  --body:         #3a332b;  /* Fließtext – warmes Anthrazit */
  --muted:        #7a7065;
  --line:         #e3d9c8;  /* Trennlinien */
  --white:        #ffffff;
  --lila:         #7a3a58;  /* Aubergine – etwas heller (für dünne Amalfi-Schrift) */
  --lila-light:   #a861c4;  /* helles Lila – Akzente & Zitate (v41-Ton; Opener eigener, hellerer Wert; Paket nutzt --lila) */

  /* ---------- Typografie-Skala (modular ~1.25, Basis 18px) ---------- */
  --fs-eyebrow: 0.78rem;
  --fs-body:    1.125rem;
  --fs-lead:    1.3rem;
  --fs-h3:      clamp(1.4rem, 1rem + 1.6vw, 1.95rem);
  --fs-h2:      clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
  --fs-script:  clamp(1.9rem, 1.1rem + 3vw, 3.2rem);

  --lh-body: 1.75;
  --lh-head: 1.12;
  --ls-label: 0.22em;
  --ls-head: 0.01em;

  /* ---------- Abstände & Layout ---------- */
  --space-section: clamp(4rem, 8vw, 8rem);
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 72px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-soft: 0 18px 50px -28px rgba(56, 49, 42, 0.45);
  --transition: 0.3s ease;
}