/* ============================================================
   Zentrale — Design-Tokens (EINZIGE Quelle für Farbe, Abstand, Typo, Motion, Fokus)

   Light = Var2 „Licht & Ordnung" (design/Var2.dc.html): Papier-Canvas, weiße Panels,
           Ruhe durch Flächen-Hierarchie. Die Textstufen sind gegenüber Var2 auf WCAG AA
           gebracht (gemessen, s. test/tokens-contrast.test.ts) — Hierarchie kommt aus
           Schrift (Sans/Mono), Größe und Gewicht, nicht mehr aus immer helleren Grautönen.
   Dark  = eigener Grund „Nacht": dieselbe Hierarchie (Canvas dunkler als Panels, Inset
           dunkler als Canvas), warm getönt, Kanten statt Schatten. Kontraste auf der
           helleren Fläche (surface) gemessen, weil das dort der schlechtere Fall ist.

   Rollen der Textstufen (beide Themes gleich):
     --ink     Fließtext, Namen, Titel                 ≥ 4,5:1 (deutlich darüber)
     --ink-2   Sekundärtext: Notizen, Zustände, Zitate ≥ 4,5:1
     --ink-3   Tertiär: Vorschau, Untertitel, Hinweise ≥ 4,5:1
     --ink-4   Meta: Zeitstempel, Eyebrows, Placeholder≥ 4,5:1
     --ink-5   Faint: Deko, Disabled, Tastatur-Hints   ≥ 3:1 — KEIN Informationstext
   Status: --st-* sind Dot-Füllungen (≥ 3:1, nicht-Text), --st-*-ink die Textvarianten (≥ 4,5:1).
   ============================================================ */

:root {
  color-scheme: light; /* native Controls (audio, Scrollbars) folgen dem Theme */

  /* ---------- Typografie ---------- */
  --font-ui: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --fs-eyebrow: 10px;
  --fs-tiny: 9.5px;
  --fs-mono-s: 10px;
  --fs-mono-m: 10.5px;
  --fs-preview: 11.5px;
  --fs-meta: 12px;
  --fs-crew: 12.5px;
  --fs-name: 13px;
  --fs-body: 14px;
  --fs-title: 15px;
  --fs-body-touch: 16px; /* Eingabefelder auf Touch: unter 16px zoomt iOS beim Fokus */

  /* ---------- 8er-Raster + Maße ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius: 8px;
  --radius-sm: 6px;
  --col-rooms-w: 264px;
  --col-tech-w: 296px;
  --header-h: 56px;
  --av-size: 28px;
  --av-size-s: 24px;
  --tap-min: 44px;                  /* Mindest-Tap-Ziel auf Touch */
  --drawer-w: min(320px, 86vw);     /* Raumliste/Technik als Overlay auf Mobil */
  --strip-h: 44px;                  /* Besatzungs-Kopfzeile auf Mobil */

  /* ---------- Safe-Area (PWA, Notch/Gesten-Leiste) ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---------- Bewegung — eine Familie, aus einem Guss ---------- */
  --motion-fast: 120ms;    /* Hover, Farbe, Druck */
  --motion-mid: 160ms;     /* Popups, Fades */
  --motion-slow: 200ms;    /* Ankunft neuer Nachrichten, Panel-Breite */
  --motion-drawer: 240ms;  /* Drawer/Overlay auf Mobil */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Fokus — ein Ring, überall gleich ---------- */
  --focus: #21201C;
  --focus-w: 2px;
  --focus-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-w) var(--focus); /* box-shadow-Variante für Container (Composer) */

  /* ---------- Flächen (Papier → Weiß) ---------- */
  --bg: #F3F1EC;          /* Canvas: Papier */
  --surface: #FFFFFF;     /* Panels, Karten, Composer */
  --inset: #ECE9E2;       /* Vertiefung: Code-Blöcke, Reaktionen, Medien-Platzhalter */
  --line: #EDEAE3;
  --line-strong: #E5E2DA;
  --line-off: #C9C4B8;
  --hover: #F7F5F0;
  --active: #F3F1EC;
  --sel: #E9E4DA;         /* aktiver Raum — klar stärker als --hover, ruhige Fläche */
  --scrim: rgba(33, 32, 28, 0.55);

  /* ---------- Schatten — hell: weicher Schatten ---------- */
  --shadow-pop: 0 4px 16px rgba(33, 32, 28, 0.10), 0 1px 2px rgba(33, 32, 28, 0.06);
  --shadow-drawer: 0 16px 40px rgba(33, 32, 28, 0.22);

  /* ---------- Text ---------- */
  --ink: #21201C;     /* 14,4:1 auf Papier */
  --ink-2: #555045;   /*  7,1:1 */
  --ink-3: #656055;   /*  5,5:1 */
  --ink-4: #726D62;   /*  4,6:1 */
  --ink-5: #908B80;   /*  3,0:1 — Faint */

  /* ---------- Sender-/Bot-Farben (auch als Text auf Papier ≥ 4,5:1) ---------- */
  --c-self: #21201C;
  --c-gold: #8F6112;     /* Ren  — Var2 #A06D14, für Text auf Papier abgedunkelt */
  --c-green: #4A7530;    /* Lumi — Var2 #4F7A33, minimal abgedunkelt */
  --c-blue: #33698C;     /* Wèn */
  --c-teal: #2F7A64;     /* Trader */
  --c-neutral: #7B766B;  /* Gruppen — weiße Initialen darauf 4,5:1 */
  --on-avatar: #FFFFFF;

  /* ---------- Status — Dot-Füllung (≥ 3:1) und Textvariante (≥ 4,5:1) ---------- */
  --st-frei: #3F9142;
  --st-busy: #B07A14;
  --st-problem: #BF3B2F;
  --st-aus: #8F8A7F;
  --st-frei-ink: #2F7A33;
  --st-busy-ink: #8F5F0F;
  --st-problem-ink: #BF3B2F;
  --st-aus-ink: #726D62;
}

/* ============================================================
   Dark — „Nacht": warmes Dunkel, kein invertiertes Light.
   Canvas (bg) ist die dunkelste Fläche, Panels (surface) liegen leicht darüber,
   Vertiefungen (inset) darunter. Schatten werden zu 1px-Kanten.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --focus: #F0EBE0;

  /* Flächen (Nacht → Panel) */
  --bg: #1A1915;
  --surface: #26241F;
  --inset: #12110D;
  --line: #2F2C26;
  --line-strong: #393630;
  --line-off: #4E4A42;
  --hover: #2D2A24;
  --active: #1A1915;
  --sel: #37332C;
  --scrim: rgba(0, 0, 0, 0.62);

  /* Schatten → Kanten */
  --shadow-pop: 0 0 0 1px #393630;
  --shadow-drawer: 0 0 0 1px #4E4A42;

  /* Text (auf surface gemessen) */
  --ink: #F0EBE0;     /* 13,0:1 */
  --ink-2: #B9B4A9;   /*  7,5:1 */
  --ink-3: #A09B90;   /*  5,6:1 */
  --ink-4: #918C81;   /*  4,6:1 */
  --ink-5: #746F64;   /*  3,1:1 — Faint */

  /* Sender-/Bot-Farben — aufgehellt, gleicher Charakter; dunkle Initialen darauf */
  --c-self: #F0EBE0;
  --c-gold: #D2A24C;
  --c-green: #8FB56A;
  --c-blue: #6FA3C7;
  --c-teal: #5FA98F;
  --c-neutral: #938E81;
  --on-avatar: #1A1915;

  /* Status */
  --st-frei: #5CB263;
  --st-busy: #D9A032;
  --st-problem: #DC6459;
  --st-aus: #787368;
  --st-frei-ink: #7CC283;
  --st-busy-ink: #DDAA45;
  --st-problem-ink: #E27B72;
  --st-aus-ink: #918C81;
}

/* ============================================================
   Basis-Regeln, die unmittelbar aus Tokens folgen (gelten für alle Module)
   ============================================================ */

/* Ein Fokus-Ring für alles, was Tastatur-Fokus bekommt — sichtbar auf jeder Fläche. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Nutzer will keine Bewegung: alle Motion-Tokens auf 0 — jede Transition/Animation,
   die ihre Dauer aus tokens.css bezieht, ist damit sofort. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-mid: 0ms;
    --motion-slow: 0ms;
    --motion-drawer: 0ms;
  }
}