/* =====================================================================================
   Vorlage 35 Küchenstudio · Farben, Schrift, 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.
   Bild: eine helle Werkstatt, die sich in der Farbe der gewählten Küchenfront färbt. Der Planer setzt
   data-front am <html> (gruen, petrol, terra, senf, nacht, beere, anthrazit, creme); jede Farbe bringt
   fünf Töne mit, die zusammen die ganze Seite färben:
     --front          die Farbe der Front (nur Flächen, nie Textfarbe)
     --front-tief     dunkle Fassung: Knöpfe, Links, Kopfzeilen (Weiß darauf mindestens 6,8 : 1)
     --front-hell     helle Fassung: Karten, Felder (Text darauf mindestens 12 : 1)
     --front-papier   Seitenhintergrund
     --tinte          Textfarbe (mindestens 13,9 : 1 auf dem Papier)
     --muted          gedämpfte Textfarbe (mindestens 7 : 1 auf Papier, Hell und Weiß)
   Dazu zwei feste Farben für alle Küchen: Signalgelb (Preisschild, Hinweise) und Tintenschwarz.
   ===================================================================================== */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registrierte Farben: damit blendet die Seite beim Wechsel der Frontfarbe weich über */
@property --front        { syntax: "<color>"; inherits: true; initial-value: #2f6f55; }
@property --front-tief   { syntax: "<color>"; inherits: true; initial-value: #1f5440; }
@property --front-hell   { syntax: "<color>"; inherits: true; initial-value: #d9eadf; }
@property --front-papier { syntax: "<color>"; inherits: true; initial-value: #eef5f0; }
@property --tinte        { syntax: "<color>"; inherits: true; initial-value: #14291f; }
@property --muted        { syntax: "<color>"; inherits: true; initial-value: #3c5546; }

:root {
  --schrift: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  /* Grundfarbe: Waldgrün (steht auch da, wenn JavaScript fehlt) */
  --front: #2f6f55;
  --front-tief: #1f5440;
  --front-hell: #d9eadf;
  --front-papier: #eef5f0;
  --tinte: #14291f;
  --muted: #3c5546;

  --signal: #f4b92e;
  --tinte-fest: #1f2328;
  --weiss: #ffffff;
  --error: #b42318;

  --bg: var(--front-papier);
  --surface: var(--weiss);
  --text: var(--tinte);
  --accent: var(--front-tief);
  --on-accent: #ffffff;
  --border: color-mix(in srgb, var(--front-tief) 22%, #ffffff);

  --radius: 22px;
  --radius-klein: 12px;
  --radius-rund: 999px;

  --breite: 1400px;
  --kopf: 68px;
  --luft: 28px;
  --regler-h: 252px;       /* Höhe der Reglerleiste im Planer, steuert die Breite des Planers bei niedrigen Fenstern */
}

:root[data-front="gruen"]     { --front: #2f6f55; --front-tief: #1f5440; --front-hell: #d9eadf; --front-papier: #eef5f0; --tinte: #14291f; --muted: #3c5546; }
:root[data-front="petrol"]    { --front: #1f7a8c; --front-tief: #125867; --front-hell: #d3eaef; --front-papier: #ecf5f7; --tinte: #10282e; --muted: #3a555c; }
:root[data-front="terra"]     { --front: #c8553d; --front-tief: #9f3a25; --front-hell: #f6dfd6; --front-papier: #fbf0ec; --tinte: #34160e; --muted: #6a4033; }
:root[data-front="senf"]      { --front: #e3a82b; --front-tief: #765000; --front-hell: #f8e7bd; --front-papier: #fcf6e6; --tinte: #2e2100; --muted: #5a4a1e; }
:root[data-front="nacht"]     { --front: #263f7e; --front-tief: #1b2f63; --front-hell: #d9e0f2; --front-papier: #eef1f9; --tinte: #111a35; --muted: #3b4668; }
:root[data-front="beere"]     { --front: #a02c5d; --front-tief: #7c1d47; --front-hell: #f2d9e4; --front-papier: #faeff4; --tinte: #2f0f1d; --muted: #6a3a4e; }
:root[data-front="anthrazit"] { --front: #3a4048; --front-tief: #272c33; --front-hell: #dde0e4; --front-papier: #eff1f3; --tinte: #171a1e; --muted: #4a5058; }
:root[data-front="creme"]     { --front: #e9e2d2; --front-tief: #5d4e36; --front-hell: #ece5d4; --front-papier: #faf7f0; --tinte: #262015; --muted: #5a5242; }

@media (max-width: 1099px) {
  :root { --kopf: 56px; --luft: 16px; }
}