/* =====================================================================================
   Vorlage 22 Friseur, neue Fassung · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: nur --accent, --accent-tief, --accent-hell. Die Haarfarben unten sind Inhalt, kein Schmuck.
   Kontrast (gerechnet): Text 15,6 : 1, leise 6,8 : 1 auf --bg, Akzent 6,9 : 1 auf --bg, Weiß auf Akzent 7,6 : 1.
   ===================================================================================== */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --schrift: "Public Sans", "Segoe UI", system-ui, sans-serif;

  --bg: #f6f3ee;            /* Kalkweiß, wie eine helle Salonwand bei Tag */
  --surface: #fffdf9;       /* Karten */
  --surface-2: #ece6dd;     /* abgesetzte Flächen, Sand */
  --text: #1f1a16;          /* 15,6 : 1 auf --bg */
  --muted: #5b534b;         /* 6,8 : 1 auf --bg, 6,1 : 1 auf --surface-2 */
  --accent: #8e3a1b;        /* die eine Farbe: tiefes Kupfer. Weiß darauf 7,6 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #6c2a11;   /* Knopf beim Überfahren, Weiß darauf 10,6 : 1 */
  --accent-hell: #efe3d4;   /* Hauch Kupfer, nur als Fläche. --accent darauf 6,0 : 1 */
  --border: #dcd3c7;
  --error: #b42318;

  --dunkel: #1d1814;        /* Espresso: Termin und Fuß */
  --dunkel-text: #f2ece5;   /* 15,0 : 1 */
  --dunkel-leise: #b8aca0;  /* 7,9 : 1 */
  --kupfer-hell: #e8a47f;   /* Marke und Links auf dunkel, 8,4 : 1 */

  /* Spiegel und Szene */
  --wand-hell: #fbf9f5;
  --wand: #e4ddd2;

  /* Haarfarben: Ansatz, Längen, Spitzen. Ohne JavaScript färbt :has() das Haar im Spiegel um,
     mit JavaScript liest js/haar.js dieselben Werte. Grundton ohne Wahl: Honigblond. */
  --ansatz: #33241b;
  --mitte: #9a6a3c;
  --spitze: #ddb070;

  --radius: 18px;
  --radius-gross: 28px;
  --radius-klein: 8px;

  --breite: 1200px;
  --abstand: clamp(84px, 10vw, 140px);
  --kopf: 66px;
}

/* Die fünf Töne der Farbleiste. Erste Zeile: Muster am Knopf (und Quelle für js/haar.js).
   Zweite Zeile: gewählter Ton für die ganze Seite (SVG im Spiegel ohne JavaScript). Getrennt, weil ein Browser
   ohne :has() sonst auch die erste Zeile verwirft. Beide Zeilen gleich halten. */
.ton-natur { --ansatz: #2f2119; --mitte: #4b3527; --spitze: #7a573b; }
:root:has(#ton-natur:checked) { --ansatz: #2f2119; --mitte: #4b3527; --spitze: #7a573b; }
.ton-honig { --ansatz: #33241b; --mitte: #9a6a3c; --spitze: #ddb070; }
:root:has(#ton-honig:checked) { --ansatz: #33241b; --mitte: #9a6a3c; --spitze: #ddb070; }
.ton-kupfer { --ansatz: #4a2416; --mitte: #973f1f; --spitze: #c8642f; }
:root:has(#ton-kupfer:checked) { --ansatz: #4a2416; --mitte: #973f1f; --spitze: #c8642f; }
.ton-asch { --ansatz: #3a2e26; --mitte: #8e8473; --spitze: #d9d0bd; }
:root:has(#ton-asch:checked) { --ansatz: #3a2e26; --mitte: #8e8473; --spitze: #d9d0bd; }
.ton-pflanze { --ansatz: #3b1d15; --mitte: #6f2c1c; --spitze: #9c4228; }
:root:has(#ton-pflanze:checked) { --ansatz: #3b1d15; --mitte: #6f2c1c; --spitze: #9c4228; }