/* Designsystem Werkstatt: CSS-Variablen.
   Erzeugt von docs/werkzeuge/erzeuge_tokens.py aus packages/ui/tokens/*.tokens.json.
   Nicht von Hand ändern. Bedeutung und Regeln: docs/design/DESIGNSYSTEM.md */

:root {
  /* ohne Modus */
  --ml-familie-anzeige: "Gabarito", system-ui, sans-serif;
  --ml-familie-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --ml-schrift-anzeige: 800 clamp(2.25rem, 5vw, 4.125rem)/1 var(--ml-familie-anzeige);
  --ml-schrift-titel-1: 800 clamp(2rem, 1.5rem + 1.6vw, 2.5rem)/1.05 var(--ml-familie-anzeige);
  --ml-schrift-titel-2: 700 1.75rem/1.1 var(--ml-familie-anzeige);
  --ml-schrift-titel-3: 700 1.3125rem/1.2 var(--ml-familie-anzeige);
  --ml-schrift-text: 400 1.0625rem/1.55 var(--ml-familie-text);
  --ml-schrift-klein: 400 0.875rem/1.5 var(--ml-familie-text);
  --ml-schrift-etikett: 600 0.8125rem/1.2 var(--ml-familie-anzeige);
  --ml-schrift-taste: 800 1rem/1 var(--ml-familie-anzeige);
  --ml-schrift-taste-klein: 800 0.875rem/1 var(--ml-familie-anzeige);
  --ml-laufweite-anzeige: -0.03em;
  --ml-laufweite-titel-1: -0.025em;
  --ml-laufweite-titel-2: -0.015em;
  --ml-laufweite-titel-3: -0.015em;
  --ml-laufweite-text: 0em;
  --ml-laufweite-klein: 0em;
  --ml-laufweite-etikett: 0em;
  --ml-laufweite-taste: 0em;
  --ml-laufweite-taste-klein: 0em;
  --ml-abstand-4: 0.25rem;
  --ml-abstand-8: 0.5rem;
  --ml-abstand-12: 0.75rem;
  --ml-abstand-16: 1rem;
  --ml-abstand-24: 1.5rem;
  --ml-abstand-32: 2rem;
  --ml-abstand-48: 3rem;
  --ml-abstand-64: 4rem;
  --ml-abstand-96: 6rem;
  --ml-ecke-klein: 8px;
  --ml-ecke-mittel: 14px;
  --ml-ecke-gross: 22px;
  --ml-ecke-rund: 999px;
  --ml-dauer-schnell: 120ms;
  --ml-dauer-normal: 200ms;
  --ml-dauer-spiel: 350ms;
  --ml-dauer-setzen: 450ms;
  --ml-dauer-betont: 700ms;
  --ml-kurve-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ml-kurve-federnd: cubic-bezier(0.3, 1.4, 0.5, 1);
  --ml-kurve-gleichmaessig: linear;
  --ml-breite-inhalt: 1200px;
  --ml-spieler-1: #D55E00;
  --ml-spieler-1-schrift: #000000;
  --ml-spieler-2: #0072B2;
  --ml-spieler-2-schrift: #FFFFFF;
  --ml-spieler-3: #F0E442;
  --ml-spieler-3-schrift: #000000;
  --ml-spieler-4: #009E73;
  --ml-spieler-4-schrift: #000000;
  --ml-spieler-5: #E69F00;
  --ml-spieler-5-schrift: #000000;
  --ml-spieler-6: #56B4E9;
  --ml-spieler-6-schrift: #000000;
  --ml-spieler-7: #CC79A7;
  --ml-spieler-7-schrift: #000000;
  --ml-spieler-8: #000000;
  --ml-spieler-8-schrift: #FFFFFF;

  /* Werkbank (hell) */
  --ml-alu: #F0F3F4;
  --ml-weiss: #FFFFFF;
  --ml-hoch: #FFFFFF;
  --ml-blech: #E4E9EB;
  --ml-raster: #D0D9DD;
  --ml-kontur: #74848D;
  --ml-tinte: #13232B;
  --ml-graphit: #53646D;
  --ml-petrol: #0E6B74;
  --ml-petrol-tief: #0A4F56;
  --ml-gelb: #FFC933;
  --ml-gelb-kante: #D9A514;
  --ml-rot: #C9372C;
  --ml-gruen: #1A7C53;
  --ml-auf-farbe: #FFFFFF;
  --ml-tinte-fest: #13232B;
  --ml-loch: rgba(19, 35, 43, 0.11);
  --ml-rand-aufkleber: #FFFFFF;
  --ml-schatten: 0 1px 0 0 rgba(19, 35, 43, 0.05), 0 14px 30px -18px rgba(19, 35, 43, 0.4);
  --ml-schwebend: 0 2px 4px 0 rgba(19, 35, 43, 0.08), 0 24px 48px -16px rgba(19, 35, 43, 0.45);
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Nachtschicht (dunkel), gewählt */
  --ml-alu: #0E161A;
  --ml-weiss: #152127;
  --ml-hoch: #213339;
  --ml-blech: #1B2A31;
  --ml-raster: #28393F;
  --ml-kontur: #74848D;
  --ml-tinte: #E3EAEE;
  --ml-graphit: #95A7B0;
  --ml-petrol: #3AA6B0;
  --ml-petrol-tief: #2B8790;
  --ml-gelb: #FFC933;
  --ml-gelb-kante: #B8890B;
  --ml-rot: #F07A6E;
  --ml-gruen: #4CC08A;
  --ml-auf-farbe: #0E161A;
  --ml-tinte-fest: #13232B;
  --ml-loch: rgba(227, 234, 238, 0.07);
  --ml-rand-aufkleber: #E3EAEE;
  --ml-schatten: 0 1px 0 0 rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.8);
  --ml-schwebend: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Nachtschicht (dunkel), wenn nichts gewählt ist */
    --ml-alu: #0E161A;
    --ml-weiss: #152127;
    --ml-hoch: #213339;
    --ml-blech: #1B2A31;
    --ml-raster: #28393F;
    --ml-kontur: #74848D;
    --ml-tinte: #E3EAEE;
    --ml-graphit: #95A7B0;
    --ml-petrol: #3AA6B0;
    --ml-petrol-tief: #2B8790;
    --ml-gelb: #FFC933;
    --ml-gelb-kante: #B8890B;
    --ml-rot: #F07A6E;
    --ml-gruen: #4CC08A;
    --ml-auf-farbe: #0E161A;
    --ml-tinte-fest: #13232B;
    --ml-loch: rgba(227, 234, 238, 0.07);
    --ml-rand-aufkleber: #E3EAEE;
    --ml-schatten: 0 1px 0 0 rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.8);
    --ml-schwebend: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}