/* Erzeugt aus oberflaeche/packages/tokens/src/index.ts mit `pnpm erzeugen`.
   Nicht von Hand ändern: Die nächste Erzeugung überschreibt es. */
:root{
  --flaeche-grund:#F9F9FA;
  --flaeche-panel:#FFFFFF;
  --flaeche-karte:#FFFFFF;
  --flaeche-hoch:#F2F3F4;
  --flaeche-aktiv:#E7E9EB;
  --flaeche-tief:#F2F3F4;
  --ink:#121417;
  --ink-leise:#565E68;
  --ink-still:#6B7480;
  --linie:#E7E9EB;
  --linie-stark:#C4C9D0;
  --abbrechen:#E7E9EB;
  --petrol:#0369A1;
  --petrol-tief:#075985;
  --petrol-gedrueckt:#064B70;
  --auf-petrol:#FFFFFF;
  --petrol-hell:#F2F3F4;
  --petrol-rand:#C4C9D0;
  --gold:#7A5203;
  --ziegel:#AD4216;
  --gut:#15803D;
  --fehler:#B91C1C;
  --warnung:var(--gold);
  --info:#2563EB;
  --gold-hell:color-mix(in srgb, var(--gold) 12%, var(--flaeche-karte));
  --ziegel-hell:color-mix(in srgb, var(--ziegel) 12%, var(--flaeche-karte));
  --gut-hell:color-mix(in srgb, var(--gut) 12%, var(--flaeche-karte));
  --fehler-hell:color-mix(in srgb, var(--fehler) 12%, var(--flaeche-karte));
  --g-versuch:#0F766E;
  --g-angriff:#6D28D9;
  --g-richtung:#565E68;
  --g-formation:#9D2E6F;
  --g-ergebnis:#1E9E52;
  --g-verteidigung:#AD4216;
  --g-besonderes:#7A5203;
  --z-neu:#6B7480;
  --z-einlesen:#7A5203;
  --z-erkennung:#0369A1;
  --z-bereit:#15803D;
  --z-fehler:#B91C1C;
  --p-offen:#6B7480;
  --p-bestaetigt:#15803D;
  --p-korrigiert:#0369A1;
  --kbd-flaeche:#E7E9EB;
  --karte-rand:#E7E9EB;
  --thumb:#E7E9EB;
  --blende:rgb(10 11 13 / .55);
  --schrift:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-marke:"Space Grotesk","Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --t-xs:0.6875rem;
  --t-sm:0.75rem;
  --t-base:0.875rem;
  --t-md:1rem;
  --t-lg:1.375rem;
  --t-xl:1.75rem;
  --r1:4px;
  --r2:8px;
  --r3:12px;
  --r4:16px;
  --r5:16px;
  --pille:8px;
  --schatten-1:0 1px 2px rgb(0 0 0 / .24);
  --schatten-2:0 2px 8px rgb(0 0 0 / .28), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-3:0 8px 24px -4px rgb(0 0 0 / .32), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-blende:0 16px 40px -8px rgb(0 0 0 / .45);
  --z-inhalt:1;
  --z-haftend:20;
  --z-menue:40;
  --z-hinweis:60;
  --tempo:160ms;
  --kurve:cubic-bezier(0.22,1,0.36,1);
  color-scheme:light;
  --tief:var(--flaeche-tief);
  --grund:var(--flaeche-grund);
  --flaeche:var(--flaeche-panel);
  --linie-fein:var(--linie);
  --kreide:var(--ink);
  --kreide-leise:var(--ink-leise);
  --kreide-still:var(--ink-still);
  --klar:var(--petrol);
  --papier:#FFFFFF;
  --tinte:#14181C;
  --bestaetigt:var(--p-bestaetigt);
  --korrigiert:var(--p-korrigiert);
  --gefahr:var(--fehler);
  --schlecht:var(--fehler);
  --rand:var(--flaeche-tief);
  --rand-hoch:var(--flaeche-hoch);
  --rand-linie:var(--linie);
  --rund:var(--r2);
  --rund-gross:var(--r3);
  --schatten:var(--schatten-1);
  --schatten-hoch:var(--schatten-2);
  --verdichtet:var(--schrift-marke);
  --lauf:var(--schrift);
  --a1:4px;
  --a2:8px;
  --a3:12px;
  --a4:16px;
  --a5:20px;
  --a6:32px;
  --a7:44px;
  --rand-aussen:22px;
  --panel-abstand:20px;
  --kopf-hoehe:68px;
  --seite-max:1240px;
  --auf-hell:#14181C;
  --auf-dunkel:#FFFFFF;
  --m-grau:#334155;
  --m-grau-tief:#1E293B;
  --m-schwarz:#27272A;
  --m-schwarz-tief:#09090B;
  --m-rot:#DC2626;
  --m-rot-tief:#991B1B;
  --m-gruen:#15803D;
  --m-gruen-tief:#14532D;
  --m-blau:#2563EB;
  --m-blau-tief:#1E3A8A;
  --m-violett:#7C3AED;
  --m-violett-tief:#4C1D95;
  --m-weiss:#F8FAFC;
  --m-weiss-tief:#475569;
  --m-gelb:#FACC15;
  --m-gelb-tief:#854D0E;
  --m-orange:#F97316;
  --m-orange-tief:#9A3412;
}
[data-thema="dunkel"]{
  --flaeche-grund:#0A0B0D;
  --flaeche-panel:#121417;
  --flaeche-karte:#121417;
  --flaeche-hoch:#191C20;
  --flaeche-aktiv:#20242A;
  --flaeche-tief:#0A0B0D;
  --ink:#FFFFFF;
  --ink-leise:#AEB5BE;
  --ink-still:#8F98A3;
  --linie:#2A2F36;
  --linie-stark:#3D434C;
  --abbrechen:#3D434C;
  --petrol:#0EA5E9;
  --petrol-tief:#38BDF8;
  --petrol-gedrueckt:#7DD3FC;
  --auf-petrol:#0A0B0D;
  --petrol-hell:#20242A;
  --petrol-rand:#3D434C;
  --gold:#FACC15;
  --ziegel:#FFA07C;
  --gut:#4ADE80;
  --fehler:#FB7185;
  --warnung:var(--gold);
  --info:#60A5FA;
  --gold-hell:color-mix(in srgb, var(--gold) 12%, var(--flaeche-karte));
  --ziegel-hell:color-mix(in srgb, var(--ziegel) 12%, var(--flaeche-karte));
  --gut-hell:color-mix(in srgb, var(--gut) 12%, var(--flaeche-karte));
  --fehler-hell:color-mix(in srgb, var(--fehler) 12%, var(--flaeche-karte));
  --g-versuch:#2DD4BF;
  --g-angriff:#C4ACFF;
  --g-richtung:#AEB5BE;
  --g-formation:#F99BD1;
  --g-ergebnis:#4ADE80;
  --g-verteidigung:#FFA07C;
  --g-besonderes:#FACC15;
  --z-neu:#8F98A3;
  --z-einlesen:#FACC15;
  --z-erkennung:#0EA5E9;
  --z-bereit:#4ADE80;
  --z-fehler:#FB7185;
  --p-offen:#8F98A3;
  --p-bestaetigt:#4ADE80;
  --p-korrigiert:#0EA5E9;
  --kbd-flaeche:#20242A;
  --karte-rand:#2A2F36;
  --thumb:#20242A;
  --blende:rgb(10 11 13 / .66);
  --schatten-1:0 1px 2px rgb(0 0 0 / .24);
  --schatten-2:0 2px 8px rgb(0 0 0 / .28), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-3:0 8px 24px -4px rgb(0 0 0 / .32), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-blende:0 16px 40px -8px rgb(0 0 0 / .45);
  --tief:var(--flaeche-tief);
  --grund:var(--flaeche-grund);
  --flaeche:var(--flaeche-panel);
  --linie-fein:var(--linie);
  --kreide:var(--ink);
  --kreide-leise:var(--ink-leise);
  --kreide-still:var(--ink-still);
  --klar:var(--petrol);
  --papier:#FFFFFF;
  --tinte:#14181C;
  --bestaetigt:var(--p-bestaetigt);
  --korrigiert:var(--p-korrigiert);
  --gefahr:var(--fehler);
  --schlecht:var(--fehler);
  --rand:var(--flaeche-tief);
  --rand-hoch:var(--flaeche-hoch);
  --rand-linie:var(--linie);
  --rund:var(--r2);
  --rund-gross:var(--r3);
  --schatten:var(--schatten-1);
  --schatten-hoch:var(--schatten-2);
  --verdichtet:var(--schrift-marke);
  --lauf:var(--schrift);
  color-scheme:dark;
}
[data-thema="hell"]{
  --flaeche-grund:#F9F9FA;
  --flaeche-panel:#FFFFFF;
  --flaeche-karte:#FFFFFF;
  --flaeche-hoch:#F2F3F4;
  --flaeche-aktiv:#E7E9EB;
  --flaeche-tief:#F2F3F4;
  --ink:#121417;
  --ink-leise:#565E68;
  --ink-still:#6B7480;
  --linie:#E7E9EB;
  --linie-stark:#C4C9D0;
  --abbrechen:#E7E9EB;
  --petrol:#0369A1;
  --petrol-tief:#075985;
  --petrol-gedrueckt:#064B70;
  --auf-petrol:#FFFFFF;
  --petrol-hell:#F2F3F4;
  --petrol-rand:#C4C9D0;
  --gold:#7A5203;
  --ziegel:#AD4216;
  --gut:#15803D;
  --fehler:#B91C1C;
  --warnung:var(--gold);
  --info:#2563EB;
  --gold-hell:color-mix(in srgb, var(--gold) 12%, var(--flaeche-karte));
  --ziegel-hell:color-mix(in srgb, var(--ziegel) 12%, var(--flaeche-karte));
  --gut-hell:color-mix(in srgb, var(--gut) 12%, var(--flaeche-karte));
  --fehler-hell:color-mix(in srgb, var(--fehler) 12%, var(--flaeche-karte));
  --g-versuch:#0F766E;
  --g-angriff:#6D28D9;
  --g-richtung:#565E68;
  --g-formation:#9D2E6F;
  --g-ergebnis:#1E9E52;
  --g-verteidigung:#AD4216;
  --g-besonderes:#7A5203;
  --z-neu:#6B7480;
  --z-einlesen:#7A5203;
  --z-erkennung:#0369A1;
  --z-bereit:#15803D;
  --z-fehler:#B91C1C;
  --p-offen:#6B7480;
  --p-bestaetigt:#15803D;
  --p-korrigiert:#0369A1;
  --kbd-flaeche:#E7E9EB;
  --karte-rand:#E7E9EB;
  --thumb:#E7E9EB;
  --blende:rgb(10 11 13 / .55);
  --schatten-1:0 1px 2px rgb(0 0 0 / .24);
  --schatten-2:0 2px 8px rgb(0 0 0 / .28), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-3:0 8px 24px -4px rgb(0 0 0 / .32), 0 0px 1px rgb(0 0 0 / .40);
  --schatten-blende:0 16px 40px -8px rgb(0 0 0 / .45);
  --tief:var(--flaeche-tief);
  --grund:var(--flaeche-grund);
  --flaeche:var(--flaeche-panel);
  --linie-fein:var(--linie);
  --kreide:var(--ink);
  --kreide-leise:var(--ink-leise);
  --kreide-still:var(--ink-still);
  --klar:var(--petrol);
  --papier:#FFFFFF;
  --tinte:#14181C;
  --bestaetigt:var(--p-bestaetigt);
  --korrigiert:var(--p-korrigiert);
  --gefahr:var(--fehler);
  --schlecht:var(--fehler);
  --rand:var(--flaeche-tief);
  --rand-hoch:var(--flaeche-hoch);
  --rand-linie:var(--linie);
  --rund:var(--r2);
  --rund-gross:var(--r3);
  --schatten:var(--schatten-1);
  --schatten-hoch:var(--schatten-2);
  --verdichtet:var(--schrift-marke);
  --lauf:var(--schrift);
  color-scheme:light;
}