/* BAUKOPF — Design Tokens (ADR-0041)
 *
 * Die einzige Quelle für Farbe, Schrift, Abstand, Radius, Schatten und Bewegung.
 * Komponenten verwenden ausschliesslich diese Variablen — nie einen festen Wert.
 * Begründung und Belegung: docs/DESIGNSYSTEM.md
 *
 * Dunkles Theme ist der Standard (ADR-0041). Ein helles Theme kommt später als
 * zweite Belegung derselben Namen, ohne neue Komponenten.
 */

:root {
  /* ── Farben: Flächen ───────────────────────────────────────────────────── */
  --bk-hintergrund: #0b1a2e;        /* tiefes Blau, Hauptoberfläche */
  --bk-flaeche: #12253d;            /* Karten, leicht aufgehellt */
  --bk-flaeche-hoch: #1a3050;       /* hervorgehobene Karte, Hover */
  --bk-flaeche-tief: #081324;       /* Navigationsleisten */
  --bk-rand: #24405f;
  --bk-rand-stark: #35597f;

  /* ── Farben: Schrift ───────────────────────────────────────────────────── */
  --bk-text: #f2f6fb;               /* 15.8:1 auf --bk-hintergrund */
  --bk-text-leise: #a8bcd4;         /* 7.6:1 auf --bk-flaeche */
  --bk-text-auf-farbe: #071426;

  /* ── Farben: Marke ─────────────────────────────────────────────────────── */
  --bk-primaer: #2f7ff0;            /* BAUKOPF-Blau */
  --bk-primaer-hell: #6aa5ff;       /* Blau als Schrift auf dunklem Grund */
  --bk-primaer-tief: #1c5cc0;
  --bk-tuerkis: #29c4c9;            /* dezenter Akzent, sparsam */

  /* ── Farben: Status ────────────────────────────────────────────────────────
   * Je Status eine Füllfarbe und eine hellere Schriftfarbe. Farbe wird nie
   * allein verwendet — immer mit Text oder Symbol (ADR-0041).
   */
  --bk-gruen: #2fa96b;
  --bk-gruen-hell: #63d69b;
  --bk-orange: #d8871b;
  --bk-orange-hell: #ffb85c;
  --bk-rot: #d9544b;
  --bk-rot-hell: #ff8b83;
  --bk-grau: #5c6f88;
  --bk-grau-hell: #a8bcd4;

  /* Gedämpfte Flächen für Badges und Hinweiskarten */
  --bk-gruen-flaeche: #14342a;
  --bk-blau-flaeche: #12294a;
  --bk-orange-flaeche: #352912;
  --bk-rot-flaeche: #3a1d1f;
  --bk-grau-flaeche: #1a2739;

  /* ── Typografie ────────────────────────────────────────────────────────── */
  --bk-schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bk-schrift-zahl: "Segoe UI", system-ui, sans-serif;

  --bk-groesse-xs: 0.75rem;   /* 12px — Etiketten */
  --bk-groesse-s: 0.875rem;   /* 14px — Nebentext */
  --bk-groesse-m: 1rem;       /* 16px — Grundtext, Minimum auf Mobile */
  --bk-groesse-l: 1.25rem;    /* 20px — Kartentitel */
  --bk-groesse-xl: 1.625rem;  /* 26px — Seitentitel */
  --bk-groesse-xxl: 2.25rem;  /* 36px — Kennzahl */
  --bk-groesse-board: 3.25rem;/* 52px — LiveBoard, aus Distanz lesbar */

  --bk-fett-normal: 400;
  --bk-fett-halb: 600;
  --bk-fett-stark: 700;

  --bk-zeilenhoehe: 1.55;
  --bk-zeilenhoehe-eng: 1.25;

  /* ── Abstände: Vielfache von 4px ───────────────────────────────────────── */
  --bk-abstand-1: 0.25rem;   /* 4  */
  --bk-abstand-2: 0.5rem;    /* 8  */
  --bk-abstand-3: 0.75rem;   /* 12 */
  --bk-abstand-4: 1rem;      /* 16 — Standardabstand in Karten */
  --bk-abstand-5: 1.5rem;    /* 24 — zwischen Karten */
  --bk-abstand-6: 2rem;      /* 32 — zwischen Abschnitten */
  --bk-abstand-7: 3rem;      /* 48 */

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --bk-radius-s: 8px;
  --bk-radius-m: 14px;       /* Karten */
  --bk-radius-l: 20px;
  --bk-radius-voll: 999px;   /* Badges, Avatare */
  --bk-akzentkante: 4px;     /* farbige Kante an Hinweisen und Planungsblöcken */

  /* ── Schatten: sanft, nie hart ─────────────────────────────────────────── */
  --bk-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --bk-schatten-2: 0 6px 18px rgba(0, 0, 0, 0.32);
  --bk-schatten-fokus: 0 0 0 3px rgba(106, 165, 255, 0.55);

  /* ── Bewegung: ruhig ───────────────────────────────────────────────────── */
  --bk-dauer: 160ms;
  --bk-dauer-lang: 260ms;
  --bk-kurve: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Touch und Layout ──────────────────────────────────────────────────── */
  --bk-touch: 44px;          /* Mindestgrösse eines Ziels auf Mobile */
  --bk-touch-haupt: 56px;    /* Hauptaktion */
  --bk-navhoehe: 64px;       /* Bottom Navigation */
  --bk-seitennav: 248px;     /* Side Navigation am Desktop */
  --bk-breite-inhalt: 1180px;
  --bk-breite-lesen: 62ch;

  /* ── Ebenen ────────────────────────────────────────────────────────────── */
  --bk-ebene-nav: 100;
  --bk-ebene-dialog: 200;
}

/* Wer Bewegung reduziert haben möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bk-dauer: 0ms;
    --bk-dauer-lang: 0ms;
  }
}