/* ==========================================================
   Vereinsapp – Design-Tokens (REQ-212)
   Einzige Datei mit Farb-, Schrift-, Abstands-, Radius- und Schattenwerten.
   Abgeleitet aus docs/design/tokens.css (Design von engineerio.de / ENGINEERIO Monitor).
   Alle anderen CSS-Dateien verwenden nur diese Variablen.
   ========================================================== */

/* Inter liegt auf dem eigenen Server (SIL Open Font License, siehe ../fonts/OFL.txt): keine Anfragen an Dritte. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marke */
  --navy-900: #061a45;
  --navy-800: #0a2a6b;
  --navy-700: #0d3a8c;
  --blue: #1673e6;
  --cyan: #14b4f0;
  --green: #1fbf6a;
  --teal: #12a38a;
  /* Abgeleitete Stufen: Primärton nur in --blue ändern, alles Blaue folgt (REQ-212 AK2).
     Dunklere Stufen mischen Schwarz bei, damit weiße Schrift bzw. Text auf hellen Flächen ≥ 4,5 : 1 bleibt (D-14). */
  --blue-strong: color-mix(in srgb, var(--blue) 85%, #000000);
  --cyan-strong: color-mix(in srgb, var(--cyan) 60%, #000000);
  --green-strong: color-mix(in srgb, var(--green) 55%, #000000);
  --blue-light: color-mix(in srgb, var(--blue) 60%, #ffffff);
  --grad: linear-gradient(120deg, var(--green), var(--cyan) 55%, var(--blue));
  /* Primärknopf: heller Verlauf ist für weiße Schrift zu hell (Kontrast < 4,5:1); daher dunklere Stufen */
  --grad-strong: linear-gradient(120deg, var(--green-strong), var(--cyan-strong) 55%, var(--blue-strong));
  --on-accent: #ffffff;

  /* Flächen und Text */
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --line: #e3e8f2;
  --line-strong: #cfd9ea;
  --ink: #0d1b3a;
  --ink-soft: #46557a;
  --heading: #0a2a6b;
  --link: var(--blue-strong);
  --track: #e4eaf4;
  --header-bg: rgba(255, 255, 255, .86);
  --backdrop: rgba(6, 26, 69, .5);
  --focus: var(--cyan);

  /* Status (Kontrast ≥ 4,5:1 auf allen Flächen; ok/warn gegenüber Monitor leicht abgedunkelt) */
  --ok: #0c7a45;
  --doing: var(--blue);
  --warn: #965700;
  --bad: #c62f3b;

  /* Navy-Band (Übersichtsbereich) */
  --band-bg: #061a45;
  --band-ink: #ffffff;
  --band-soft: rgba(255, 255, 255, .72);
  --band-line: rgba(255, 255, 255, .14);

  /* Form */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px -12px rgba(13, 42, 107, .18);
  --shadow-lg: 0 30px 60px -20px rgba(13, 42, 107, .28);
  --shadow-btn: 0 10px 24px -12px color-mix(in srgb, var(--blue) 70%, transparent);

  /* Schrift */
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-base: 1rem;      /* 16 px: auch in Eingabefeldern (kein Zoom auf iOS) */
  --fs-small: .875rem;
  --fs-h1: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --fs-h2: 1.35rem;
  --lh: 1.55;
  --tracking-heading: -.02em;

  /* Abstände und Maße */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter: 20px;
  --content-max: 1228px;
  --header-h: 64px;
  --bottom-nav-h: 64px;
  --touch: 44px;
  --focus-ring: 3px;
}

/* Dunkel nach Systemeinstellung – außer manuell „hell“ gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071028;
    --surface: #0d1a3a;
    --surface-2: #12224a;
    --line: #1f3263;
    --line-strong: #2d4583;
    --ink: #e7eefc;
    --ink-soft: #9eb0d6;
    --heading: #f2f6ff;
    --link: var(--blue-light);
    --track: #1c2d58;
    --header-bg: rgba(7, 16, 40, .84);
    --backdrop: rgba(2, 8, 22, .7);
    --ok: #3fdc8a;
    --doing: var(--blue-light);
    --warn: #ffb54a;
    --bad: #ff6b76;
    --band-bg: #040c22;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* Dunkel manuell gewählt (Umschalter, gespeichert im Browser) */
:root[data-theme="dark"] {
  --bg: #071028;
  --surface: #0d1a3a;
  --surface-2: #12224a;
  --line: #1f3263;
  --line-strong: #2d4583;
  --ink: #e7eefc;
  --ink-soft: #9eb0d6;
  --heading: #f2f6ff;
  --link: var(--blue-light);
  --track: #1c2d58;
  --header-bg: rgba(7, 16, 40, .84);
  --backdrop: rgba(2, 8, 22, .7);
  --ok: #3fdc8a;
  --doing: var(--blue-light);
  --warn: #ffb54a;
  --bad: #ff6b76;
  --band-bg: #040c22;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}