/* Erzeugt von `cargo run -p blueflix-design --bin tokens-css` – nicht von Hand ändern. */

@font-face {
  font-family: "Google Sans Flex";
  src: url("/static/fonts/GoogleSansFlex.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MCB Sans";
  src: url("/static/fonts/MCBSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bf-familie-text: "Google Sans Flex", system-ui, sans-serif;
  --bf-familie-marke: "MCB Sans", "Google Sans Flex", system-ui, sans-serif;
  --bf-abstand-winzig: 4px;
  --bf-abstand-klein: 8px;
  --bf-abstand-mittel: 12px;
  --bf-abstand-normal: 16px;
  --bf-abstand-gross: 24px;
  --bf-abstand-sehr-gross: 32px;
  --bf-abstand-riesig: 48px;
  --bf-radius-klein: 4px;
  --bf-radius-mittel: 8px;
  --bf-radius-gross: 12px;
  --bf-radius-groesser: 16px;
  --bf-radius-sehr-gross: 28px;
  --bf-radius-voll: 9999px;
  --bf-schrift-display-gross: 700 57px/64px var(--bf-familie-marke);
  --bf-schrift-display-gross-laufweite: -0.25px;
  --bf-schrift-display-mittel: 700 45px/52px var(--bf-familie-marke);
  --bf-schrift-display-mittel-laufweite: 0px;
  --bf-schrift-display-klein: 700 36px/44px var(--bf-familie-marke);
  --bf-schrift-display-klein-laufweite: 0px;
  --bf-schrift-headline-gross: 700 32px/40px var(--bf-familie-marke);
  --bf-schrift-headline-gross-laufweite: 0px;
  --bf-schrift-headline-mittel: 700 28px/36px var(--bf-familie-marke);
  --bf-schrift-headline-mittel-laufweite: 0px;
  --bf-schrift-headline-klein: 700 24px/32px var(--bf-familie-marke);
  --bf-schrift-headline-klein-laufweite: 0px;
  --bf-schrift-title-gross: 700 22px/28px var(--bf-familie-marke);
  --bf-schrift-title-gross-laufweite: 0px;
  --bf-schrift-title-mittel: 500 16px/24px var(--bf-familie-text);
  --bf-schrift-title-mittel-laufweite: 0.15px;
  --bf-schrift-title-klein: 500 14px/20px var(--bf-familie-text);
  --bf-schrift-title-klein-laufweite: 0.1px;
  --bf-schrift-body-gross: 400 16px/24px var(--bf-familie-text);
  --bf-schrift-body-gross-laufweite: 0.5px;
  --bf-schrift-body-mittel: 400 14px/20px var(--bf-familie-text);
  --bf-schrift-body-mittel-laufweite: 0.25px;
  --bf-schrift-body-klein: 400 12px/16px var(--bf-familie-text);
  --bf-schrift-body-klein-laufweite: 0.4px;
  --bf-schrift-label-gross: 500 14px/20px var(--bf-familie-text);
  --bf-schrift-label-gross-laufweite: 0.1px;
  --bf-schrift-label-mittel: 500 12px/16px var(--bf-familie-text);
  --bf-schrift-label-mittel-laufweite: 0.5px;
  --bf-schrift-label-klein: 500 11px/16px var(--bf-familie-text);
  --bf-schrift-label-klein-laufweite: 0.5px;
  --bf-dauer-sehr-kurz: 100ms;
  --bf-dauer-kurz: 200ms;
  --bf-dauer-mittel: 300ms;
  --bf-dauer-lang: 500ms;
  --bf-kurve-standard: cubic-bezier(0.2, 0, 0, 1);
  --bf-kurve-betont-ein: cubic-bezier(0.05, 0.7, 0.1, 1);
  --bf-kurve-betont-aus: cubic-bezier(0.3, 0, 0.8, 0.15);
  --bf-zustand-hover: 0.08;
  --bf-zustand-fokus: 0.1;
  --bf-zustand-gedrueckt: 0.1;
  --bf-zustand-gezogen: 0.16;
  --bf-zustand-deaktiviert: 0.38;
  /* Fensterklassen (für Media Queries nicht als Variable nutzbar): kompakt < 600px, mittel < 840px, breit. */
  --bf-rand-kompakt: 16px;
  --bf-abstand-elemente-kompakt: 8px;
  --bf-rand-mittel: 24px;
  --bf-abstand-elemente-mittel: 12px;
  --bf-rand-breit: 32px;
  --bf-abstand-elemente-breit: 16px;
  --bf-farbe-hintergrund: #f8fafd;
  --bf-farbe-flaeche: #eaedf2;
  --bf-farbe-flaeche-niedrig: #f1f4f8;
  --bf-farbe-flaeche-hoch: #e2e6ed;
  --bf-farbe-flaeche-hoechste: #d9dee6;
  --bf-farbe-text: #151b24;
  --bf-farbe-text-leise: #4d5663;
  --bf-farbe-umriss: #79818d;
  --bf-farbe-umriss-leise: #cbd1db;
  --bf-farbe-akzent: #00686f;
  --bf-farbe-auf-akzent: #fafcff;
  --bf-farbe-akzent-container: #9deef6;
  --bf-farbe-auf-akzent-container: #003033;
  --bf-farbe-sekundaer: #1961d2;
  --bf-farbe-tertiaer: #7146cf;
  --bf-farbe-fehler: #b32227;
  --bf-farbe-auf-fehler: #fafcff;
  --bf-farbe-verlauf-start: #f8fafd00;
  --bf-farbe-verlauf-ende: #f8fafd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    --bf-farbe-hintergrund: #080b10;
    --bf-farbe-flaeche: #141920;
    --bf-farbe-flaeche-niedrig: #0e1218;
    --bf-farbe-flaeche-hoch: #1d222a;
    --bf-farbe-flaeche-hoechste: #262c35;
    --bf-farbe-text: #eff2f7;
    --bf-farbe-text-leise: #b6becb;
    --bf-farbe-umriss: #737b86;
    --bf-farbe-umriss-leise: #373d48;
    --bf-farbe-akzent: #22e3f2;
    --bf-farbe-auf-akzent: #001f22;
    --bf-farbe-akzent-container: #00464c;
    --bf-farbe-auf-akzent-container: #b9f4fa;
    --bf-farbe-sekundaer: #77abff;
    --bf-farbe-tertiaer: #af97ff;
    --bf-farbe-fehler: #fd736c;
    --bf-farbe-auf-fehler: #290b0a;
    --bf-farbe-verlauf-start: #080b1000;
    --bf-farbe-verlauf-ende: #080b10;
  }
}

:root[data-modus="dunkel"] {
  color-scheme: dark;
  --bf-farbe-hintergrund: #080b10;
  --bf-farbe-flaeche: #141920;
  --bf-farbe-flaeche-niedrig: #0e1218;
  --bf-farbe-flaeche-hoch: #1d222a;
  --bf-farbe-flaeche-hoechste: #262c35;
  --bf-farbe-text: #eff2f7;
  --bf-farbe-text-leise: #b6becb;
  --bf-farbe-umriss: #737b86;
  --bf-farbe-umriss-leise: #373d48;
  --bf-farbe-akzent: #22e3f2;
  --bf-farbe-auf-akzent: #001f22;
  --bf-farbe-akzent-container: #00464c;
  --bf-farbe-auf-akzent-container: #b9f4fa;
  --bf-farbe-sekundaer: #77abff;
  --bf-farbe-tertiaer: #af97ff;
  --bf-farbe-fehler: #fd736c;
  --bf-farbe-auf-fehler: #290b0a;
  --bf-farbe-verlauf-start: #080b1000;
  --bf-farbe-verlauf-ende: #080b10;
}

:root[data-modus="hell"] {
  color-scheme: light;
  --bf-farbe-hintergrund: #f8fafd;
  --bf-farbe-flaeche: #eaedf2;
  --bf-farbe-flaeche-niedrig: #f1f4f8;
  --bf-farbe-flaeche-hoch: #e2e6ed;
  --bf-farbe-flaeche-hoechste: #d9dee6;
  --bf-farbe-text: #151b24;
  --bf-farbe-text-leise: #4d5663;
  --bf-farbe-umriss: #79818d;
  --bf-farbe-umriss-leise: #cbd1db;
  --bf-farbe-akzent: #00686f;
  --bf-farbe-auf-akzent: #fafcff;
  --bf-farbe-akzent-container: #9deef6;
  --bf-farbe-auf-akzent-container: #003033;
  --bf-farbe-sekundaer: #1961d2;
  --bf-farbe-tertiaer: #7146cf;
  --bf-farbe-fehler: #b32227;
  --bf-farbe-auf-fehler: #fafcff;
  --bf-farbe-verlauf-start: #f8fafd00;
  --bf-farbe-verlauf-ende: #f8fafd;
}