/* Design-Tokens des Smart Habitat (#29).
 *
 * Eine Stelle für Farbe, Abstand, Radius, Schatten und Typo-Skala. Wer hier
 * nichts findet, was er braucht, legt es hier an — nicht als Hex-Wert
 * irgendwo in app.css.
 *
 * Hell ist die Vorgabe auf :root. Dunkel kommt zweimal: über
 * `prefers-color-scheme` für die Systemeinstellung und über
 * `[data-theme="dark"]` für den Umschalter in der Oberfläche. Beide setzen
 * ausschliesslich Farbtokens um — kein Abstand, keine Schrift, kein Layout.
 *
 * Zustandsfarben (#29, AGENTS.md Regel 2 und 3)
 * ---------------------------------------------
 * Sieben Zustände, jeder mit Farbe, Fläche und Rand als eigene Tokens. Die
 * Farbe allein trägt die Aussage nie: jeder Zustand hat zusätzlich ein
 * Symbol, eine Form und einen deutschen Text — siehe `states.js` und die
 * Klassen `.chip`, `.is-simulated`, `.is-silent` in app.css. Ein
 * Rot-Grün-Unterschied beantwortet die Leitfrage aus #1 nicht allein.
 *
 * Kontrast: die Vordergrundfarben sind gegen `--surface` und `--surface-2`
 * auf mindestens 4.5:1 gewählt (WCAG AA für Text), die dunklen Entsprechungen
 * gegen den dunklen Grund.
 */

:root {
  color-scheme: light;

  /* --- Grundflächen und Text ------------------------------------------ */
  --surface: #ffffff;
  --surface-2: #f4f6f7;
  --surface-3: #e7eaec;
  --surface-sunken: #eef1f2;
  --surface-inverse: #14181c;
  --text: #14181c;
  --text-muted: #55606a;
  /* Dunkel genug für WCAG AA auf --surface (gemessen 4.5:1). Der vorherige,
     hellere Ton lag bei 3.9:1 — und dieser Ton trägt echten Text:
     Sensorschlüssel, Zählungen, Gruppenüberschriften der Palette. */
  --text-faint: #67717b;
  --text-inverse: #ffffff;
  --border: #d3d9dd;
  --border-strong: #aab4bb;

  /* Akzent — Navigation, Fokus, aktive Zustände. Bewusst keine der sieben
     Zustandsfarben, damit „ausgewählt" nie wie „in Ordnung" aussieht. */
  --accent: #0b6a72;
  --accent-hover: #085259;
  --accent-soft: #dcecee;
  --accent-contrast: #ffffff;

  /* --- Zustände (#25) -------------------------------------------------- */
  /* in Ordnung — nur für wirklich gemessene Werte (AGENTS.md Regel 2) */
  --state-ok: #14713a;
  --state-ok-bg: #e2f3e8;
  --state-ok-border: #8dc9a4;

  /* Aufmerksamkeit nötig */
  --state-warn: #8a5200;
  --state-warn-bg: #fbeedd;
  --state-warn-border: #dfae6d;

  /* Alarm */
  --state-alarm: #ad2318;
  --state-alarm-bg: #fbe6e4;
  --state-alarm-border: #e39a93;

  /* veraltet — der Wert ist da, aber nicht mehr aktuell */
  --state-stale: #1a5c8a;
  --state-stale-bg: #e2eef7;
  --state-stale-border: #93bcd9;

  /* stumm — ein Gerät, das melden sollte, ist tot. Das ist rot (Regel 3). */
  --state-silent: #8f1233;
  --state-silent-bg: #fbe3ea;
  --state-silent-border: #dc90a8;

  /* simuliert — nie grün, immer schraffiert (Regel 2, #16) */
  --state-simulated: #5d3a99;
  --state-simulated-bg: #ece6f8;
  --state-simulated-border: #b39fdb;

  /* nicht überwacht — sieht anders aus als „in Ordnung" */
  --state-unmonitored: #4c5760;
  --state-unmonitored-bg: #eceff1;
  --state-unmonitored-border: #b0bac1;

  /* Schraffur für alles Erzeugte. Als Token, damit sie überall dieselbe ist:
     Sensorkarte, Kachel, Sparkline-Grund. */
  --hatch-simulated: repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    color-mix(in srgb, var(--state-simulated) 16%, transparent) 5px 10px
  );
  --hatch-unmonitored: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--state-unmonitored) 12%, transparent) 6px 12px
  );

  /* --- Lageplan (#61, #76) ---------------------------------------------- */
  /* Baumkronen, Gebaeudegrundriss und Wiese. Bewusst keine Zustandsfarben:
     ein Baum ist kein Zustand, und ein gruener Baum neben einer gruenen Zone
     waere genau die Verwechslung, die #29 verbietet. */
  --canopy: #2f6b44;
  --ground: #eef2ec;
  --building: #dfe4e7;
  --building-line: #b6bfc5;

  /* --- Verbindungszustand der Datenschicht (#30) ------------------------ */
  --link-ok: var(--state-ok);
  --link-slow: var(--state-warn);
  --link-down: var(--state-alarm);

  /* --- Typografie ------------------------------------------------------ */
  /* Systemschriften. Keine Web-Fonts, kein CDN — die Oberfläche muss offline
     und hinter Tailscale vollständig aussehen (#6, #44). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  /* Anzeigeschrift für die Artenkarte (#53): der Namensblock und der
     Stammbaum lesen sich wie das gedruckte Terrarienschild, nicht wie eine
     Kachel. Auch hier nur Systemschriften — kein Web-Font, kein CDN (#6, #44).
     Ein Token statt eines Hex-Werts irgendwo, damit es die eine Stelle
     bleibt. */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", "Times New Roman", serif;

  --size-xs: 0.75rem;
  --size-sm: 0.8125rem;
  --size-base: 0.9375rem;
  --size-md: 1.0625rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5rem;
  --size-2xl: 2rem;
  /* Der Satz ganz oben (#35). Auf dem Handy füllt er den ersten Bildschirm. */
  --size-verdict: clamp(2.125rem, 9vw, 3.25rem);

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* --- Abstand --------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Radius und Schatten --------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.08);
  --shadow-md: 0 2px 10px rgba(16, 24, 32, 0.10);
  --shadow-lg: 0 12px 40px rgba(16, 24, 32, 0.20);

  /* --- Masse ----------------------------------------------------------- */
  /* 44 px ist die Untergrenze für jedes Ziel, das man mit dem Daumen trifft
     — das Ding wird unterwegs vom Handy aus angeschaut (#1, #29). */
  --tap-target: 44px;
  --sidebar-width: 76px;
  --sidebar-width-wide: 200px;
  --topbar-height: 56px;
  --content-max: 1180px;

  /* --- Bewegung -------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* --- Fokus ----------------------------------------------------------- */
  /* Sichtbar, in beiden Themen, auch auf farbigem Grund. */
  --focus-ring: 3px solid var(--accent);
  --focus-offset: 2px;

  /* --- Ebenen ---------------------------------------------------------- */
  --z-sticky: 10;
  --z-drawer: 40;
  --z-palette: 50;
  --z-toast: 60;
}

/* Dunkel über die Systemeinstellung. Der Wächter `:not([data-theme="light"])`
   sorgt dafür, dass eine ausdrückliche Wahl „hell" die Systemeinstellung
   schlägt und nicht umgekehrt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #12171b;
    --surface-2: #191f25;
    --surface-3: #232b32;
    --surface-sunken: #0d1114;
    --surface-inverse: #eef2f5;
    --text: #e8edf1;
    --text-muted: #a3b0ba;
    --text-faint: #7d8b96;
    --text-inverse: #12171b;
    --border: #2c353d;
    --border-strong: #465059;

    --accent: #4fbfc9;
    --accent-hover: #78d2da;
    --accent-soft: #12333a;
    --accent-contrast: #06222a;

    --state-ok: #5cc98a;
    --state-ok-bg: #12291d;
    --state-ok-border: #2f6b48;

    --state-warn: #e0a83f;
    --state-warn-bg: #2c2314;
    --state-warn-border: #7a5c22;

    --state-alarm: #f0736a;
    --state-alarm-bg: #2e1815;
    --state-alarm-border: #8b3b34;

    --state-stale: #6bb4e8;
    --state-stale-bg: #13232f;
    --state-stale-border: #34607f;

    --state-silent: #f0819f;
    --state-silent-bg: #2e161f;
    --state-silent-border: #8a3752;

    --state-simulated: #b79df0;
    --state-simulated-bg: #211b33;
    --state-simulated-border: #5b4a86;

    --state-unmonitored: #a0acb5;
    --state-unmonitored-bg: #1d2429;
    --state-unmonitored-border: #49545c;

    --canopy: #4f9a6a;
    --ground: #10171a;
    --building: #1d252b;
    --building-line: #3a444c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65);
  }
}

/* Dunkel über den Umschalter — dieselben Werte, ausdrücklich gewählt.
   Bewusst verdoppelt statt über @import geteilt: eine Datei, ein Blick, und
   der Umschalter funktioniert auch auf einem System, das hell steht. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #12171b;
  --surface-2: #191f25;
  --surface-3: #232b32;
  --surface-sunken: #0d1114;
  --surface-inverse: #eef2f5;
  --text: #e8edf1;
  --text-muted: #a3b0ba;
  --text-faint: #7d8b96;
  --text-inverse: #12171b;
  --border: #2c353d;
  --border-strong: #465059;

  --accent: #4fbfc9;
  --accent-hover: #78d2da;
  --accent-soft: #12333a;
  --accent-contrast: #06222a;

  --state-ok: #5cc98a;
  --state-ok-bg: #12291d;
  --state-ok-border: #2f6b48;

  --state-warn: #e0a83f;
  --state-warn-bg: #2c2314;
  --state-warn-border: #7a5c22;

  --state-alarm: #f0736a;
  --state-alarm-bg: #2e1815;
  --state-alarm-border: #8b3b34;

  --state-stale: #6bb4e8;
  --state-stale-bg: #13232f;
  --state-stale-border: #34607f;

  --state-silent: #f0819f;
  --state-silent-bg: #2e161f;
  --state-silent-border: #8a3752;

  --state-simulated: #b79df0;
  --state-simulated-bg: #211b33;
  --state-simulated-border: #5b4a86;

  --state-unmonitored: #a0acb5;
  --state-unmonitored-bg: #1d2429;
  --state-unmonitored-border: #49545c;

  --canopy: #4f9a6a;
  --ground: #10171a;
  --building: #1d252b;
  --building-line: #3a444c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65);
}

/* Ausdrücklich hell — nötig, damit der Umschalter auch auf einem dunkel
   eingestellten System nach hell zurückkann. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Wer weniger Bewegung will, bekommt weniger Bewegung. Nicht „etwas
   schneller" — aus. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-base: 1ms;
  }
}