/* OpenScout – Design-Tokens (einzige Stelle für Gestaltungswerte)
   Grundlage: Mubea Brand Styleguide 01/2023 + „00 CI Vorgaben und Guideline“.
   Ebene 1: Mubea-Farbspektrum · Ebene 2: Bedeutung · Ebene 3: Komponenten.
   Nur Farben aus dem Mubea-Spektrum; einzige freigegebene Ausnahme: Signalrot für Fehler. */

@font-face { font-family: "TheSans C5"; font-weight: 300; src: local("TheSans C5 Light"), local("TheSansC5-Light"); font-display: swap; }
@font-face { font-family: "TheSans C5"; font-weight: 400; src: local("TheSans C5 Plain"), local("TheSansC5-Plain"); font-display: swap; }
@font-face { font-family: "TheSans C5"; font-weight: 700; src: local("TheSans C5 Bold"), local("TheSansC5-Bold"); font-display: swap; }
@font-face { font-family: "TheSans C5"; font-weight: 800; src: local("TheSans C5 ExtraBold"), local("TheSansC5-ExtraBold"); font-display: swap; }
@font-face { font-family: "Carlito"; font-weight: 400; src: url("/static/fonts/carlito-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Carlito"; font-weight: 700; src: url("/static/fonts/carlito-latin-700-normal.woff2") format("woff2"); font-display: swap; }

:root {
  /* Ebene 1 – Mubea-Farbspektrum (Styleguide S. 13–15) */
  --mubea-blue: #004b95;
  --dark-blue: #00194b;
  --azure: #2586e6;
  --sky: #00c6ff;
  --apple-green: #a4c20f;
  --lime: #c8ed10;
  --light-blue: #4e90bf;
  --blue-grey: #ccdbea;
  --powder-grey: #d2dee1;
  --warm-grey: #e2e4e4;
  --middle-grey: #868686;
  --dark-grey: #444444;
  --white: #ffffff;
  --signalrot: #c4123f;            /* freigegebene Ausnahme: nur Fehler */

  /* Ebene 2 – Bedeutung */
  --farbe-primaer: var(--mubea-blue);
  --farbe-tief: var(--dark-blue);
  --farbe-akzent: var(--lime);
  --farbe-highlight: var(--light-blue);
  --grund: var(--white);
  --flaeche: var(--white);
  --flaeche-hover: var(--warm-grey);
  --flaeche-auswahl: var(--blue-grey);
  --tabellenkopf: var(--powder-grey);
  --rahmen: var(--blue-grey);
  --linie: var(--powder-grey);
  --text: var(--dark-grey);
  --text-2: var(--dark-grey);      /* Sekundärtext: Dark Grey, Unterscheidung über Größe/Schnitt (Middle Grey hat zu wenig Kontrast) */
  --text-leise: var(--middle-grey);
  --text-invers: var(--white);
  --fokus: var(--azure);
  --status-ok: var(--apple-green);
  --status-info: var(--azure);
  --status-offen: var(--middle-grey);
  --status-fehler: var(--signalrot);
  --ki: var(--sky);
  --score-1: var(--blue-grey);
  --score-2: var(--light-blue);
  --score-3: var(--azure);
  --score-4: var(--mubea-blue);
  --score-5: var(--dark-blue);

  /* Typografie */
  --schrift: "TheSans C5", Calibri, Carlito, "Segoe UI", sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gr-titel: 28px;  --zh-titel: 34px;
  --gr-abschnitt: 18px;
  --gr-text: 15px;   --zh-text: 22px;
  --gr-klein: 13px;
  --gr-overline: 11px;
  --gr-kennzahl: 34px;

  /* Raster und Abstände (4-px-Basis) */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  --seitenrand: 32px;
  --ecke: 0px;

  /* Komponenten */
  --leiste-breit: 240px;
  --leiste-schmal: 64px;
  --kopfzeile: 56px;
  --panel-breite: 420px;
  --feld-hoehe: 36px;
  --zeile-hoehe: 48px;
  --button-primaer-bg: var(--farbe-primaer);
  --button-primaer-text: var(--text-invers);
  --leiste-bg: var(--farbe-primaer);
  --leiste-aktiv-bg: var(--farbe-tief);
  --leiste-markierung: var(--farbe-akzent);
  color-scheme: light;
}

/* Dichte „kompakt“ – nur andere Token-Werte */
:root[data-dichte="kompakt"] {
  --gr-text: 14px; --zh-text: 20px;
  --feld-hoehe: 32px;
  --zeile-hoehe: 36px;
  --seitenrand: 20px;
  --a5: 18px; --a6: 24px;
}