/* =====================================================================
   tokens.css — CarCenter Erding · Haut A „Der Hof im Tageslicht"
   Quelle: bau-brief.md §5 (Palette), §6 (Typo), §8 (Easing). Werte 1:1.
   Start HELL (GESETZ Kap. 1) — dunkel NUR über [data-theme="dark"], nie über
   prefers-color-scheme. Themenfeste *-fest-Tokens überschreibt kein Thema
   (GESETZ Kap. 11); Bühnen-Klassen definieren die Text-Tokens auf sie um.
   ===================================================================== */
:root {
  color-scheme: light;
  /* Grund · Fläche · Karte · Kante */
  --grund: #eef1f5;
  --flaeche: #e1e6ed;
  --karte: #f9fafc;
  --kante: #d3d9e1;
  /* Schrift */
  --tinte: #0e141c;
  --meta: #4f5a68;
  /* Handlung */
  --rot: #e40015; /* CTA-Fläche, Live-Punkt — nie Fließtext */
  --rot-text: #c00014; /* Akzentwort, Links, Nummern */
  --auf-rot: #f4f6f9; /* Schrift auf --rot (4,87:1) */

  /* themenfest — kein Thema überschreibt diese */
  --kalk-fest: #f4f6f9;
  --meta-fest: #c9d0da;
  --rot-fest: #ff6a6a;
  --dunkel-fest: #0b0f15;
  --leiste-fest: #f9fafc;
  --leiste-tinte-fest: #0e141c;
  --leiste-meta-fest: #4f5a68;
  --leiste-kante-fest: #d3d9e1;
  --leiste-flaeche-fest: #e1e6ed;
  --karte-fest: #0b0f15; /* Bewerten-Karte, Gerät */
  --rand-fest: rgb(255 255 255 / 0.14);

  /* Schatten aus Material (bau-brief §8: Kontaktschatten in Tinte 45 %) */
  --schatten-kontakt: 0 40px 80px -30px rgb(14 20 28 / 0.45);
  --schatten-klein: 0 18px 36px -22px rgb(14 20 28 / 0.35);

  /* Typo */
  --disp: "Mona Sans", "Host Grotesk", system-ui, sans-serif;
  --txt: "Host Grotesk", system-ui, sans-serif;
  --breit-xxl: 125%;
  --breit-l: 112%;
  --breit-h2: 110%;
  --breit-h3: 100%;
  --breit-wert: 125%;
  --dsp-case: none;
  --spur-xxl: -0.04em;
  --spur-l: -0.025em;
  --spur-h2: -0.018em;

  --fs-xxl: clamp(3.6rem, 10.4vw, 9.5rem);
  --fs-l: clamp(2.2rem, 4vw, 3.4rem);
  --fs-z1: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-h1-sub: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 2.8vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-wert: clamp(2.4rem, 4.8vw, 4.2rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.8125rem;

  /* Bewegung — EIN Easing-Token „Anfahrt" (bau-brief §8) */
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --dauer-ui: 180ms;
  --dauer-auftritt: 800ms;

  /* Maße */
  --leiste-h: 88px;
  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --bahn-max: 1680px;
  --radius: 14px;
  --radius-gross: 22px;

  /* Aliase für die Bausteine (bausteine.css) und die Detailseite (detail.css) */
  --linie: var(--kante);
  --text: var(--tinte);
  --akzent: var(--rot-text);
  --akzent-hell: var(--rot);
  --akzent-dim: var(--rot-text);
  --flaeche-2: var(--karte);
  --signal: var(--rot);
  --marke: var(--rot-text);
  --soul: var(--rot);
  --soul-schrift: var(--auf-rot);
}

/* Schalter-Thema „Hof bei Nacht, Hallenlicht an" (bau-brief §5) — jeder Farb-Token hat hier seinen Partner */
[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0d1117;
  --flaeche: #161c24;
  --karte: #11161d;
  --kante: #26303c;
  --tinte: #eceff3;
  --meta: #9aa4b2;
  --rot: #e40015;
  --rot-text: #ff6a6a;
  --auf-rot: #f4f6f9;
  --schatten-kontakt: 0 40px 80px -30px rgb(0 0 0 / 0.7);
  --schatten-klein: 0 18px 36px -22px rgb(0 0 0 / 0.6);
  --linie: var(--kante);
  --text: var(--tinte);
  --akzent: var(--rot-text);
  --akzent-dim: var(--rot-text);
  --flaeche-2: var(--karte);
  --marke: var(--rot-text);
}

/* Bühnen-Scoping über Tokens (GESETZ Kap. 11): alles auf Video/Bild/dunkler
   Karte benutzt nur themenfeste Werte — Schrift UND Grund. */
.ist-buehne {
  --tinte: var(--kalk-fest);
  --meta: var(--meta-fest);
  --rot-text: var(--rot-fest);
  --kante: var(--rand-fest);
  --text: var(--kalk-fest);
  --akzent: var(--rot-fest);
  background-color: var(--dunkel-fest);
  color: var(--kalk-fest);
}

/* Kopfleiste ist themenfest hell + deckend (bau-brief §10 Regel-53-Zeile 3) */
.ist-leiste {
  --tinte: var(--leiste-tinte-fest);
  --meta: var(--leiste-meta-fest);
  --kante: var(--leiste-kante-fest);
  --flaeche: var(--leiste-flaeche-fest);
  --text: var(--leiste-tinte-fest);
  --linie: var(--leiste-kante-fest);
  --rot-text: #c00014;
  --akzent: #c00014;
  background-color: var(--leiste-fest);
  color: var(--leiste-tinte-fest);
}