/* Design-Tokens DPSG Bad Godesberg, Quelle: Style Book (Stammesdesign/Farben/farben.css).
   Farben nie direkt im Code verwenden, immer über die Rollen weiter unten. */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette */
  --stammesblau: #003056; --dpsg-rot: #b61f29; --weiss: #ffffff;
  --blau-dunkel: #00223c; --blau-80: #335978; --blau-60: #66839a; --blau-40: #99acbb; --blau-20: #ccd6dd; --blau-10: #e6eaee;
  --rot-dunkel: #7f161d; --rot-20: #f0d2d4; --rot-10: #f8e9ea;
  --ocker: #d6711f; --ocker-dunkel: #9c5011; --sand: #eedcc4; --gold: #eead2b;
  --petrol: #1f7a74; --petrol-hell: #d4edeb;
  --papier: #faf8f5; --grau-700: #3d4851; --grau-500: #5a666f; --grau-300: #c4cbd1; --grau-100: #eef1f3;

  /* Rollen, helles Theme */
  color-scheme: light;
  --seite: var(--weiss);
  --karte: var(--papier);
  --text: var(--stammesblau);
  --fliesstext: var(--grau-700);
  --nebentext: var(--grau-500);
  --akzent: var(--dpsg-rot);
  --linie: var(--blau-20);
  --flaeche: var(--blau-10);
  --feld: var(--weiss);
  --primaer: var(--stammesblau);
  --primaer-text: var(--weiss);
  --warm: var(--ocker-dunkel);
  --intern-flaeche: var(--sand);
  --intern-text: var(--blau-dunkel);

  /* Abstände: Grundeinheit 4 px */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a6: 24px; --a8: 32px; --a12: 48px; --a16: 64px;
  /* Ecken: Felder 4, Buttons 8, Kacheln 16, Badges rund, Fotos eckig */
  --r-feld: 4px; --r-button: 8px; --r-kachel: 16px; --r-badge: 999px;
  --schrift: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --seite: var(--blau-dunkel);
    --karte: var(--stammesblau);
    --text: var(--weiss);
    --fliesstext: var(--weiss);
    --nebentext: var(--blau-40);
    --akzent: var(--gold);
    --linie: var(--blau-80);
    --flaeche: var(--blau-80);
    --feld: var(--blau-dunkel);
    --primaer: var(--weiss);
    --primaer-text: var(--stammesblau);
    --warm: var(--gold);
    --intern-flaeche: var(--blau-80);
    --intern-text: var(--weiss);
  }
}