/* tokens.css — Autohaus 19 · Autohaus & Autocenter Mosig GmbH
   Haut A „Der Autopark" (Sieger des Duells 05.10.2026) — Kalk + Oliv + Preisschild-Gelb.
   Start-Thema HELL (immer), Schalter-Thema dunkel. Bühnen tragen themenfeste Tokens.
   Jeder Farb-Token hat einen Zweitthema-Partner — außer den *-fest-Tokens. */

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ——— Start-Thema HELL (immer der Start) ——— */
  --grund: oklch(0.958 0.011 112);            /* #F1F2EA kalkig, Oliv-Stich — nie Reinweiß */
  --flaeche: oklch(0.918 0.014 110);          /* #E6E7DC eine Tonstufe dunkler, trägt Platten */
  --tinte: oklch(0.247 0.012 129);            /* #1F221C Anthrazit warm — 14,3:1 auf Grund */
  --meta: oklch(0.455 0.022 122);             /* #5A5F52 — 5,8:1 auf Grund */
  --handlung: oklch(0.428 0.043 120);         /* #4C5338 Altseiten-Oliv vertieft */
  --handlung-text: oklch(0.966 0.008 105);    /* Kalk auf Handlung — 7,3:1 */
  --material: oklch(0.934 0.070 100);         /* #F4EBB5 Preisschild-Gelb (nur Fläche) */
  --material-tinte: oklch(0.247 0.012 129);   /* Tinte auf Gelb — 13,3:1 */
  --kontur: color-mix(in oklch, var(--tinte) 14%, transparent);
  --kontur-stark: color-mix(in oklch, var(--tinte) 26%, transparent);
  --schatten: 0 18px 34px -20px rgba(31, 34, 28, 0.35);
  --schatten-karte: 0 10px 24px -16px rgba(31, 34, 28, 0.28);

  /* ——— themenfest: ändern sich NIE mit dem Schalter (Bühnen, Köpfe, Bänder) ——— */
  --dunkel-fest: oklch(0.206 0.012 115);      /* #151612 Bühnen-Grund */
  --kalk-fest: oklch(0.966 0.008 105);        /* #F4F3EA Text auf Bühne — 16,3:1 */
  --meta-fest: oklch(0.765 0.020 110);        /* #B9BCAB Meta auf Bühne — 9,4:1 */
  --oliv-fest: oklch(0.428 0.043 120);        /* #4C5338 Ankauf-Band, themenfest */
  --gelb-fest: oklch(0.934 0.070 100);        /* #F4EBB5 Preisschild, themenfest */
  --tinte-fest: oklch(0.247 0.012 129);       /* Tinte auf Gelb, themenfest */
  --video-grund: #0b0e12;                     /* dunkler Grundton der Medienfläche (Head) */

  /* ——— Typo ——— */
  --schrift-display: "Red Hat Display", "Source Sans 3", system-ui, sans-serif;
  --schrift-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ——— Manager-Stil-Haken (EINBAU §3j) ——— */
  --text: var(--tinte);
  --akzent: var(--handlung);
  --akzent-text: var(--handlung-text);
  --akzent-auf-dunkel: oklch(0.760 0.055 115);
  --schrift-ueberschrift: var(--schrift-display);

  /* ——— Maße ——— */
  --radius: 6px;
  --nav-hoehe: 88px;
  --seite-max: 1340px;
  --seite-rand: clamp(20px, 4.5vw, 64px);
}

/* ——— Schalter-Thema DUNKEL (per Klick, nie per prefers-color-scheme) ——— */
[data-theme="dunkel"] {
  color-scheme: dark;

  --grund: oklch(0.206 0.012 115);            /* #171812 Anthrazit vertieft, nie Reinschwarz */
  --flaeche: oklch(0.255 0.014 115);          /* #22241B */
  --tinte: oklch(0.938 0.008 105);            /* #EDEEE4 — 15,3:1 auf Grund */
  --meta: oklch(0.720 0.018 112);             /* #A9AC9B — 7,7:1 */
  --handlung: oklch(0.760 0.055 115);         /* #B9C294 Link-Oliv hell — trägt auf Dunkel */
  --handlung-text: oklch(0.206 0.012 115);    /* dunkler Text auf hellem Oliv */
  --material: oklch(0.934 0.070 100);         /* Gelb bleibt — 14,8:1 */
  --material-tinte: oklch(0.247 0.012 129);
  --kontur: color-mix(in oklch, var(--tinte) 16%, transparent);
  --kontur-stark: color-mix(in oklch, var(--tinte) 30%, transparent);
  --schatten: 0 18px 34px -20px rgba(0, 0, 0, 0.6);
  --schatten-karte: 0 10px 24px -16px rgba(0, 0, 0, 0.5);
}