/*
 * Design-Tokens der Komponentenbibliothek (T-9, E-13, Z-9).
 * Abgeleitet aus dem abgenommenen Entwurf konzept/entwuerfe/farbschema-cockpit.html (2026-10-15)
 * und uandi-os/agentur/kontext (design-system/DESIGN.md, praesentations-design.md), Stand 0b8d58f.
 * Komponenten nutzen nur die Rollen (--surface, --text, --good …), nie die Markenfarben direkt.
 * Hell und Dunkel sind zwei Belegungen derselben Rollen.
 */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Markenfarben (praesentations-design.md), nur hier verwenden */
  --navy: #031831;
  --navy-card: #0a2138;
  --navy-card-line: #14304e;
  --navy-dark: #122945;
  --navy-mid: #465e7b;
  --blue-light: #929eac;
  --sand: #f4f4ee;
  --sand-dark: #e3e3d9;
  --sand-light: #fafaf9;
  --gray-light: #e1e0e0;
  --white: #ffffff;
  --orange: #ff6040;
  --gray: #6c6963;

  /* Schrift: nur 400 und 700 */
  --font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --size-kpi: 40px;
  --size-kpi-unit: 18px;
  --size-heading: 18px;
  --size-body: 16px;
  --size-small: 14px;
  --size-label: 13px;
  --size-micro: 12px;

  /* Abstände (Basis 4px), Ecken 0, keine Schatten */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius: 0;

  /* Rollen, hell: Sand und Weiß, Text Navy (Z-10), gedämpftes Rot und Grün (Z-9) */
  --surface: var(--sand);
  --card: var(--white);
  --card-line: var(--white);
  --text: var(--navy);
  --text-muted: var(--gray);
  --line: var(--gray-light);
  --logo: var(--navy);
  --track: var(--sand-dark);
  --bar: var(--navy-mid);
  --good: #0f6e56;
  --good-bg: #ddeee7;
  --good-fg: #0b5a46;
  --bad: #b42318;
  --bad-bg: #f8e1de;
  --bad-fg: #9a1d14;
  --neutral-bg: var(--sand-dark);
  --focus: var(--orange);
  /* Diagramme: genau eine Reihe trägt die Aussage (orange), die übrigen aus der Blaurampe */
  --series-highlight: var(--orange);
  --series-1: var(--navy-mid);
  --series-2: var(--navy);
  --series-3: var(--blue-light);
  --grid: var(--gray-light);
  --axis: var(--gray);
  /* Heatmap: vier Stufen von hell (wenig) bis dunkel (viel), mit lesbarer Schrift je Stufe */
  --heat-0: var(--sand);
  --heat-0-text: var(--navy);
  --heat-1: var(--sand-dark);
  --heat-1-text: var(--navy);
  --heat-2: var(--blue-light);
  --heat-2-text: var(--navy);
  --heat-3: var(--navy-mid);
  --heat-3-text: var(--white);

  color-scheme: light;
}

/* Rollen, dunkel: Navy-Fläche, aufgehelltes Rot und Grün */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--navy);
    --card: var(--navy-card);
    --card-line: var(--navy-card-line);
    --text: var(--white);
    --text-muted: var(--blue-light);
    --line: var(--navy-card-line);
    --logo: var(--white);
    --track: var(--navy-dark);
    --bar: var(--blue-light);
    --good: #3dbe8b;
    --good-bg: #123d37;
    --good-fg: #7fe0b6;
    --bad: #ff4d6a;
    --bad-bg: #43172a;
    --bad-fg: #ff9aab;
    --neutral-bg: var(--navy-dark);
    --series-1: var(--blue-light);
    --series-2: var(--sand-dark);
    --series-3: var(--navy-mid);
    --grid: var(--navy-card-line);
    --axis: var(--blue-light);
    /* Stufen der Matrix: hell umgekehrt, je Stufe ein Ton der Rampe, keine Nuancen (T-13d) */
    --heat-0: var(--navy-dark);
    --heat-0-text: var(--blue-light);
    --heat-1: var(--navy-mid);
    --heat-1-text: var(--white);
    --heat-2: var(--blue-light);
    --heat-2-text: var(--navy);
    --heat-3: var(--sand-dark);
    --heat-3-text: var(--navy);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: var(--navy);
  --card: var(--navy-card);
  --card-line: var(--navy-card-line);
  --text: var(--white);
  --text-muted: var(--blue-light);
  --line: var(--navy-card-line);
  --logo: var(--white);
  --track: var(--navy-dark);
  --bar: var(--blue-light);
  --good: #3dbe8b;
  --good-bg: #123d37;
  --good-fg: #7fe0b6;
  --bad: #ff4d6a;
  --bad-bg: #43172a;
  --bad-fg: #ff9aab;
  --neutral-bg: var(--navy-dark);
  --series-1: var(--blue-light);
  --series-2: var(--sand-dark);
  --series-3: var(--navy-mid);
  --grid: var(--navy-card-line);
  --axis: var(--blue-light);
  /* Stufen der Matrix: hell umgekehrt, je Stufe ein Ton der Rampe, keine Nuancen (T-13d) */
  --heat-0: var(--navy-dark);
  --heat-0-text: var(--blue-light);
  --heat-1: var(--navy-mid);
  --heat-1-text: var(--white);
  --heat-2: var(--blue-light);
  --heat-2-text: var(--navy);
  --heat-3: var(--sand-dark);
  --heat-3-text: var(--navy);
  color-scheme: dark;
}