/* Farb-, Schrift-, Abstands- und Radius-Tokens. Herkunft und Begründung
   jedes Werts: ARCHITECTURE.md, Abschnitt "Gestaltungsplan (7.9)". Hell/
   Dunkel folgt prefers-color-scheme und ist in den Einstellungen über
   data-theme übersteuerbar (7.9).

   Leitfarbe Steel Blue #4682B4, OKLCH L=0.588 C=0.0993 H=245.74 (7.9).
   Die volle Tonleiter --steel-50…--steel-950 und die getönte Neutralreihe
   stehen in ARCHITECTURE.md; hier nur die daraus abgeleiteten, tatsächlich
   verwendeten Rollen - keine zweite Pflegestelle für die Zwischenstufen.

   Schrift: Poppins für Überschriften, Inter für alles andere und
   ausnahmslos für Zahlen (7.9). Einzige Stelle, an der Familien und
   Schnitte feststehen - jede andere CSS-Datei referenziert nur
   var(--font-heading)/var(--font-body), keine Schriftangaben sonst wo. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;   /* Variable Font, deckt 400/500/600 aus einer Datei ab */
  font-display: swap;
  src: url("/static/fonts/inter-variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/poppins-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/poppins-semibold.woff2") format("woff2");
}

:root {
  --font-heading: "Poppins", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Poppins hat eine große x-Höhe - die Überschriften-Skala ist eigens
     daran gemessen, nicht aus --fs-* (Inter) übernommen (7.9). */
  --fs-heading-sm: 16px;  /* Marke/Wortmarke, kleine Dialogtitel */
  --fs-heading-md: 20px;  /* Kartentitel, Fach-/Gruppennamen */
  --fs-heading-lg: 24px;  /* Abschnitts-/Seitentitel */
  --fs-heading-xl: 32px;  /* große Seitenüberschrift ("Neuer Posten") */

  --bg: #F7FBFE;
  --surface: #FFFFFF;
  --surface-fach: #EFF4F9;
  --border: #D2D8DE;
  --text: #070B0E;
  --text-muted: #4D5359;

  --accent: #4682B4;         /* steel-500 - Bedienelemente, Fokusring, Kurve (>=3:1) */
  --accent-text: #1C517A;    /* steel-700 - Text/Links in Stahlblau (>=4.5:1) */
  --accent-strong: #2F6896;  /* steel-600 - Knopf-/Pillenflächen mit heller Schrift */
  --on-accent: #FFFFFF;      /* Text auf --accent-strong (5,93:1) - eigenes Token,
                                 da --accent-strong modusunabhängig gleich bleibt und
                                 --surface das nicht mehr wäre (7.9: Test statt Auge) */

  --einnahme: #005F21;
  --ausgabe: #070B0E;
  --befund: #782E00;
  --fehler: #862726;

  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 40px;
  --fs-3xl: 56px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --bewegung-dauer: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020305;
    --surface: #070B0E;
    --surface-fach: #0F1317;
    --border: #33393D;
    --text: #F7FBFE;
    --text-muted: #B8BFC4;

    --accent: #4682B4;
    --accent-text: #95BCDF;   /* steel-300 - heller für Text im dunklen Modus */
    --accent-strong: #2F6896;

    --einnahme: #65C67D;
    --ausgabe: #F7FBFE;
    --befund: #FA9D68;
    --fehler: #FA8880;
  }
}

:root[data-theme="dark"] {
  --bg: #020305;
  --surface: #070B0E;
  --surface-fach: #0F1317;
  --border: #33393D;
  --text: #F7FBFE;
  --text-muted: #B8BFC4;

  --accent: #4682B4;
  --accent-text: #95BCDF;
  --accent-strong: #2F6896;

  --einnahme: #65C67D;
  --ausgabe: #F7FBFE;
  --befund: #FA9D68;
  --fehler: #FA8880;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bewegung-dauer: 0ms;
  }
}