/* Gegenanflug – gemeinsame Design-Tokens für Website und Anwendung.
   Namen und Grundwerte wie VFRplan (Fliegen/src/landing/styles.css). Eigentümer der WERTE: Design;
   die NAMEN sind Vertrag mit der Anwendung und werden nicht umbenannt, nur ergänzt.
   Kontrastwerte (WCAG 2.x) und Begründungen: docs/ci/ci.md, Abschnitt „Farben“. */
:root {
  /* Marke: Gegenanflug-Blau („Tintenblau“) (H224) – tiefer und violetter als VFRplan-Blau #0b5fa5 (H207),
     nie mit Ampel (grün/gelb/rot) oder Lagebild-Himmelblau (--lage-verein, H200) zu verwechseln.
     Weiß auf --brand 8.44:1, --brand auf Weiß 8.44:1. */
  --brand: #27479f;
  --brand-dark: color-mix(in srgb, var(--brand) 80%, #000);   /* ≈ #1f397f, Hover */
  --brand-soft: color-mix(in srgb, var(--brand) 6%, transparent);
  --brand-fg: var(--brand);                                    /* Markenfarbe als Text/Linie */
  --accent-soft: color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-ink: #1b2a5e;                                        /* Nachtblau: Flächen mit weißer Schrift (13.6:1) */
  --ink: #0a0a0a; --text: #3f3f46; --muted: #62626c; --faint: #6b6b75;
  --rule: #e4e4e7; --rule-strong: #d4d4d8;
  --surface: #ffffff; --ground: #ffffff; --sunken: #f4f4f5; --zinc-50: #fafafa; --on-ink: #ffffff;
  /* Ampel: immer zusammen mit Symbol und Text verwenden. --warn-strong nur als Fläche/Balken, nie allein als Symbol (2.2:1). */
  --ok: #007956; --ok-bg: #ecfdf5; --ok-line: #a4f4cf;
  --warn: #9a5b00; --warn-bg: #fffbeb; --warn-line: #ffd236; --warn-strong: #f99c00; --warn-ink: #5c3b00;
  --bad: #b42318; --bad-bg: #fef3f2; --bad-line: #fda29b;
  --unk: #52525b; --unk-bg: #f4f4f5; --unk-line: #d4d4d8;
  /* Lagebild-Buchstatus (kein Rot!) – Farbe UND Form: im Buch ● gefüllt, Verein ◆, unbekannt ▲, Durchflug ○ Ring.
     Alle ≥ 3:1 auf Weiß und auf --lage-karte (Grafikkontrast WCAG 1.4.11). */
  --lage-imbuch: var(--ok); --lage-verein: #0284c7; --lage-unbekannt: #b77c02; --lage-durchflug: #8a8a94;
  --lage-karte: #f4f4f5; --lage-karte-linie: #d4d4d8;
  --lage-veraltet-bg: #e4e4e7; --lage-veraltet-fg: #3f3f46;
  /* Betriebsart: „ohne Betriebsleitung“ = kräftiges Nachtblau-Band, „mit Betriebsleitung“ = ruhiges Markenband */
  --betrieb-ohne-bg: var(--brand-ink); --betrieb-ohne-fg: #ffffff; --betrieb-ohne-sub: #c9d3f5;
  --betrieb-mit-bg: color-mix(in srgb, var(--brand) 10%, var(--surface)); --betrieb-mit-fg: var(--brand-fg); --betrieb-mit-line: color-mix(in srgb, var(--brand) 35%, var(--surface));
  /* Warteschlange (offline): neutral, nicht Ampel; gesendet = --ok */
  --wartet: var(--unk); --wartet-bg: var(--unk-bg); --wartet-line: var(--rule-strong);
  --focus: var(--brand-fg);
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 14px; --radius-pill: 999px; --radius-sm: 8px;
  --tap: 48px; --tap-gross: 64px;
  --schatten-karte: 0 1px 2px rgba(10, 20, 50, .06), 0 8px 24px -16px rgba(10, 20, 50, .25);
  --schatten-bild: 0 30px 60px -34px rgba(20, 30, 70, .45);
  color-scheme: light;
}
@media screen {
  :root[data-theme="dark"] {
    --brand-fg: #93a8ec; --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent); --accent-soft: color-mix(in srgb, var(--brand) 22%, transparent);
    --brand-ink: #25397f;
    --ink: #f4f4f5; --text: #d4d4d8; --muted: #a1a1aa; --faint: #8e8e98; --rule: #2f2f35; --rule-strong: #45454d;
    --surface: #18181b; --ground: #0f0f11; --sunken: #27272a; --zinc-50: #1e1e22; --on-ink: #0f0f11;
    --ok: #4ade80; --ok-bg: rgba(34, 197, 94, .12); --ok-line: #166534;
    --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .10); --warn-line: #854d0e; --warn-strong: #f59e0b; --warn-ink: #fde68a;
    --bad: #f87171; --bad-bg: rgba(248, 113, 113, .12); --bad-line: #7f1d1d;
    --unk: #a1a1aa; --unk-bg: #27272a; --unk-line: #45454d;
    --lage-verein: #38bdf8; --lage-unbekannt: #facc15; --lage-durchflug: #8e8e98;
    --lage-karte: #1e1e22; --lage-karte-linie: #3a3a42; --lage-veraltet-bg: #27272a; --lage-veraltet-fg: #d4d4d8;
    --betrieb-ohne-sub: #c9d3f5;
    --betrieb-mit-bg: color-mix(in srgb, var(--brand) 18%, var(--surface)); --betrieb-mit-line: color-mix(in srgb, var(--brand) 45%, var(--surface));
    --schatten-karte: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
    --schatten-bild: 0 30px 60px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
  /* Hochkontrast für Sonne im Turm/am Platz (hell): dunklere Schrift, kräftige Linien, Ampeltöne nachgedunkelt */
  :root[data-theme="sonne"] {
    --text: #18181b; --muted: #27272a; --faint: #3f3f46; --rule: #a1a1aa; --rule-strong: #52525b;
    --brand-fg: #1c3478;
    --ok: #005c41; --ok-line: #007956; --warn: #7a4700; --warn-line: #9a5b00; --bad: #8f1a12; --bad-line: #b42318;
    --unk: #3f3f46; --unk-line: #52525b;
    --lage-karte-linie: #71717a;
    --schatten-karte: 0 0 0 1px #52525b;
  }
}