/* ============================================================================
   BISS & BALANCE — Design-Tokens
   Aus dem Moodboard (_reference/moodboard.png) extrahiert am 2026-08-13.

   Aufbau:
   1. Gemeinsame Basis (Schrift, Tinte, Materialität)
   2. Drei Farbwelten als Scopes: [data-welt="zahnarzt" | "ortho" | "kids"]
   3. Jede Welt liefert dieselben semantischen Namen — Sections lassen sich
      damit ohne Umbau von einem Teilbereich in den anderen umschalten.

   Wichtig: --akzent ist eine DEKORATIVE Farbe (Flächen, Linien, Icons).
   Für Text auf hellem Grund immer --akzent-text verwenden (>= 4.5:1),
   für weiße Schrift auf gefüllter Fläche immer --akzent-flaeche.
   ========================================================================= */

:root {
  /* --- Schrift ---------------------------------------------------------- */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;

  /* Weites Tracking ist das typografische Erkennungsmerkmal der Marke.
     Werte aus der Wortmarke im Moodboard zurückgerechnet. */
  --track-logo: 0.32em;     /* Wortmarke BISS & BALANCE */
  --track-claim: 0.16em;    /* Claim unter der Wortmarke */
  --track-eyebrow: 0.22em;  /* Rubriken, Fachbereichs-Zeilen */
  --track-headline: 0.02em;
  --track-body: 0.01em;

  /* --- Tinte (weltübergreifend) ---------------------------------------- */
  --ink: #1E2121;           /* Wortmarke, Headlines           15.1:1 auf Creme */
  --ink-weich: #4D4E4E;     /* Fließtext, Fachbereichszeile    8.0:1 */

  /* --- Materialität (weltübergreifend, aus der Moodboard-Fußzeile) ------ */
  --mat-kalkputz: #D7CEC4;
  --mat-eiche-hell: #C1A283;
  --mat-riffelholz: #B59274;
  --mat-leinen: #BAAA9A;
  --mat-salbei-matt: #9B9A8C;
  --mat-messing: #C9A67E;
}

/* ============================================================ 1 — ZAHNARZT
   Hauptpraxis. Warm, sandig, Kupfer als Leitfarbe.
   Claim: FÜR EIN LÄCHELN IN BALANCE
   ------------------------------------------------------------------------ */
[data-welt="zahnarzt"],
:root {
  --bg: #FBF6F2;            /* Creme — Seitengrund */
  --bg-alt: #F2E9E2;        /* Porzellan — abgesetzte Sections */
  --bg-tief: #2E2C2A;       /* dunkle Kontrast-Section */

  --ton-1: #F2E9E2;         /* Porzellan */
  --ton-2: #DDC6AF;         /* Sand */
  --ton-3: #C09771;         /* Karamell */
  --ton-4: #C09771;         /* keine eigene vierte Stufe — Karamell trägt mit */
  --akzent: #B37C4E;        /* Kupfer — Leitfarbe, dekorativ */
  --ton-5: #444443;         /* Anthrazit */

  --akzent-marke: #B37C4E;  /* Strichfarbe der Bildmarke */
  --akzent-text: #966740;   /* Kupfer, textsicher   4.54:1 auf --bg */
  --akzent-flaeche: #966740;/* Weiß darauf          4.87:1 */
  --linie: #E2D5C7;         /* Trennlinien, Rahmen */
}

/* =============================================================== 2 — ORTHO
   Kieferorthopädie. Kühler, klinischer, Taupe/Salbei.
   Claim: FUNKTION IN BALANCE
   ------------------------------------------------------------------------ */
[data-welt="ortho"] {
  --bg: #F7F6F5;            /* Papier */
  --bg-alt: #ECE9E7;        /* Kalk */
  --bg-tief: #2B2B2A;

  --ton-1: #ECE9E7;         /* Kalk */
  --ton-2: #BFB7AE;         /* Stein */
  --ton-3: #969789;         /* Salbei */
  --ton-4: #969789;         /* keine eigene vierte Stufe — Salbei trägt mit */
  --akzent: #776D62;        /* Taupe — Leitfarbe */
  --ton-5: #464645;         /* Graphit */

  --akzent-marke: #8C7E6B;  /* Strichfarbe der Bildmarke im Moodboard */
  --akzent-text: #6B6157;   /* 5.60:1 auf --bg */
  --akzent-flaeche: #6B6157;/* Weiß darauf 6.05:1 */
  --linie: #DCD8D4;
}

/* ================================================================ 3 — KIDS
   Kinderzahnheilkunde. Pastell, vier gleichberechtigte Töne.
   Claim: KLEINE LÄCHELN IN BALANCE
   ------------------------------------------------------------------------ */
[data-welt="kids"] {
  --bg: #FCF8F3;            /* Vanille-Creme */
  --bg-alt: #F6ECE1;        /* Vanille */
  --bg-tief: #3A332E;

  --ton-1: #F6ECE1;         /* Vanille */
  --ton-2: #FDD0B4;         /* Apricot */
  --ton-3: #B8BB9F;         /* Salbei */
  --ton-4: #BECBD4;         /* Himmel */
  --ton-5: #CDB8CF;         /* Flieder */

  /* Kräftigere Fassung derselben Töne — Logo, Icons, Linien */
  --apricot: #F2A278;
  --salbei: #A9B091;
  --himmel: #AEC0CD;
  --flieder: #BCA4C4;

  --akzent: #F2A278;        /* Apricot führt */
  --akzent-marke: #F2A278;
  --akzent-text: #9F5D37;   /* 4.85:1 auf --bg */
  --akzent-flaeche: #9F5D37;/* Weiß darauf 5.13:1 */

  /* Textsichere Fassungen der Nebenfarben */
  --salbei-text: #6E7359;   /* 4.66:1 */
  --himmel-text: #5B7488;   /* 4.62:1 */
  --flieder-text: #8B6690;  /* 4.51:1 */

  --linie: #EADDD0;
}