/* Hausstil „Ruhig und hell“ – gemeinsame Tokens aller Homelab-Oberflächen.
   Vorbilder (Jan 2026-10-23): Things 3, Apple Home, Notion, Vercel Geist.
   Regeln und Bausteine: docs/design/hausstil.md. Projekte importieren diese Datei
   und benennen ihre eigenen Variablen auf --hs-* um, statt Farben neu zu erfinden.
   Dunkel: per prefers-color-scheme oder Klasse .dark auf <html>; .light erzwingt hell. */
:root {
  --hs-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hs-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;

  /* Schriftgrößen (Apple-Skala) */
  --hs-fs-xs: 0.75rem;   /* 12 Etiketten, Hostnamen */
  --hs-fs-s: 0.8125rem;  /* 13 Knöpfe, Chips */
  --hs-fs-m: 0.9375rem;  /* 15 Fließtext */
  --hs-fs-l: 1.0625rem;  /* 17 Kartentitel */
  --hs-fs-xl: 1.375rem;  /* 22 Abschnittsüberschrift */
  --hs-fs-xxl: 2rem;     /* 32 Seitentitel */

  /* Abstände (4er-Raster) */
  --hs-sp-1: 4px; --hs-sp-2: 8px; --hs-sp-3: 12px; --hs-sp-4: 16px;
  --hs-sp-5: 24px; --hs-sp-6: 32px; --hs-sp-7: 48px;

  /* Rundungen */
  --hs-r-s: 8px;   /* Knöpfe, Eingaben, Chips */
  --hs-r-m: 12px;  /* Karten, Kacheln */
  --hs-r-l: 16px;  /* große Flächen, Dialoge */
  --hs-r-pill: 999px;

  /* Farben hell */
  --hs-bg: #f5f5f3;          /* Seitengrund, leicht warm wie Notion */
  --hs-surface: #ffffff;     /* Karten */
  --hs-surface-2: #fafaf9;   /* Hover, eingelassene Flächen */
  --hs-sunken: #efefec;      /* Eingaben-Grund, Chips */
  --hs-line: #e7e7e4;        /* Haarlinien */
  --hs-line-strong: #d6d6d2;
  --hs-text: #1d1d1f;
  --hs-text-2: #6b6b70;      /* Nebentext */
  --hs-text-3: #9b9ba0;      /* Hinweise */
  --hs-accent: #0a66e0;      /* einziges Blau: Auswahl, Hauptknopf, Links */
  --hs-accent-hover: #0857c2;
  --hs-accent-soft: #e7f0fd;
  --hs-on-accent: #ffffff;
  --hs-ok: #1f8f4e;
  --hs-warn: #b86e00;
  --hs-bad: #d0342c;
  --hs-ok-soft: #e6f4ec; --hs-warn-soft: #fbf1e0; --hs-bad-soft: #fbe9e8;
  --hs-shadow: 0 1px 2px rgba(20, 20, 25, 0.04), 0 1px 1px rgba(20, 20, 25, 0.03);
  --hs-shadow-raised: 0 6px 20px -8px rgba(20, 20, 25, 0.14);
  --hs-focus: 0 0 0 3px rgba(10, 102, 224, 0.22);

  /* Apple-Home & Liquid-Glass Tokens (Stand 2026-10-23, docs/design/hausstil.md) */
  --hs-wallpaper: radial-gradient(900px 600px at 5% -5%, #c9ddff 0%, transparent 60%),
                  radial-gradient(800px 600px at 100% 5%, #ffdcc8 0%, transparent 55%),
                  radial-gradient(900px 700px at 70% 100%, #e3d8ff 0%, transparent 60%),
                  radial-gradient(700px 600px at 0% 90%, #d2f0e3 0%, transparent 55%),
                  linear-gradient(180deg, #eef0f6 0%, #ebe9f2 100%);
  --hs-tile: #ffffff;
  --hs-tile-shadow: 0 1px 2px rgba(30, 30, 50, 0.05), 0 4px 14px -6px rgba(30, 30, 50, 0.12);

  --hs-glass-bg: rgba(255, 255, 255, 0.55);
  --hs-glass-bg-hover: rgba(255, 255, 255, 0.72);
  --hs-glass-edge: rgba(255, 255, 255, 0.8);
  --hs-glass-line: rgba(60, 60, 90, 0.1);
  --hs-glass-fill: rgba(118, 118, 128, 0.12);
  --hs-glass-blur: blur(22px) saturate(180%);
  --hs-glass-shadow: 0 10px 30px -14px rgba(40, 40, 90, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.3);

  /* Wetterkarte & Temperatur */
  --hs-wk-temp: #ff9500;
  --hs-wk-temp-text: #d97a00;

  /* Apple-Home Systemfarben je Gruppe (Symbolkreise) */
  --hs-group-alltag: #34c759;
  --hs-group-ki: #5856d6;
  --hs-group-medien: #ff2d55;
  --hs-group-smarthome: #ff9500;
  --hs-group-system: #007aff;
  --hs-group-default: #8e8e93;

  /* Aliase für direkte Nutzung (--ah-*, --glass-*, --wk-*) */
  --ah-wallpaper: var(--hs-wallpaper);
  --ah-tile: var(--hs-tile);
  --ah-tile-shadow: var(--hs-tile-shadow);
  --glass-bg: var(--hs-glass-bg);
  --glass-bg-hover: var(--hs-glass-bg-hover);
  --glass-edge: var(--hs-glass-edge);
  --glass-line: var(--hs-glass-line);
  --glass-fill: var(--hs-glass-fill);
  --glass-blur: var(--hs-glass-blur);
  --glass-shadow: var(--hs-glass-shadow);
  --wk-temp: var(--hs-wk-temp);
  --wk-temp-text: var(--hs-wk-temp-text);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --hs-bg: #111113; --hs-surface: #1c1c1e; --hs-surface-2: #232326; --hs-sunken: #161618;
    --hs-line: #2c2c2f; --hs-line-strong: #3a3a3e;
    --hs-text: #f2f2f3; --hs-text-2: #a1a1a6; --hs-text-3: #6e6e73;
    --hs-accent: #4c9bff; --hs-accent-hover: #6aadff; --hs-accent-soft: rgba(76, 155, 255, 0.14); --hs-on-accent: #0b0b0d;
    --hs-ok: #3fbf74; --hs-warn: #e0a030; --hs-bad: #ff6a5f;
    --hs-ok-soft: rgba(63, 191, 116, 0.14); --hs-warn-soft: rgba(224, 160, 48, 0.14); --hs-bad-soft: rgba(255, 106, 95, 0.14);
    --hs-shadow: none; --hs-shadow-raised: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    --hs-focus: 0 0 0 3px rgba(76, 155, 255, 0.3);

    --hs-wallpaper: radial-gradient(900px 600px at 5% -5%, #1b3160 0%, transparent 60%),
                    radial-gradient(800px 600px at 100% 5%, #3d2142 0%, transparent 55%),
                    radial-gradient(900px 700px at 70% 100%, #26214a 0%, transparent 60%),
                    radial-gradient(700px 600px at 0% 90%, #10353a 0%, transparent 55%),
                    linear-gradient(180deg, #0f1015 0%, #0b0b0f 100%);
    --hs-tile: #232327;
    --hs-tile-shadow: none;

    --hs-glass-bg: rgba(52, 52, 62, 0.42);
    --hs-glass-bg-hover: rgba(66, 66, 78, 0.55);
    --hs-glass-edge: rgba(255, 255, 255, 0.14);
    --hs-glass-line: rgba(255, 255, 255, 0.08);
    --hs-glass-fill: rgba(118, 118, 128, 0.24);
    --hs-glass-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --hs-wk-temp-text: #ffb340;

    color-scheme: dark;
  }
}
:root.dark {
  --hs-bg: #111113; --hs-surface: #1c1c1e; --hs-surface-2: #232326; --hs-sunken: #161618;
  --hs-line: #2c2c2f; --hs-line-strong: #3a3a3e;
  --hs-text: #f2f2f3; --hs-text-2: #a1a1a6; --hs-text-3: #6e6e73;
  --hs-accent: #4c9bff; --hs-accent-hover: #6aadff; --hs-accent-soft: rgba(76, 155, 255, 0.14); --hs-on-accent: #0b0b0d;
  --hs-ok: #3fbf74; --hs-warn: #e0a030; --hs-bad: #ff6a5f;
  --hs-ok-soft: rgba(63, 191, 116, 0.14); --hs-warn-soft: rgba(224, 160, 48, 0.14); --hs-bad-soft: rgba(255, 106, 95, 0.14);
  --hs-shadow: none; --hs-shadow-raised: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  --hs-focus: 0 0 0 3px rgba(76, 155, 255, 0.3);

  --hs-wallpaper: radial-gradient(900px 600px at 5% -5%, #1b3160 0%, transparent 60%),
                  radial-gradient(800px 600px at 100% 5%, #3d2142 0%, transparent 55%),
                  radial-gradient(900px 700px at 70% 100%, #26214a 0%, transparent 60%),
                  radial-gradient(700px 600px at 0% 90%, #10353a 0%, transparent 55%),
                  linear-gradient(180deg, #0f1015 0%, #0b0b0f 100%);
  --hs-tile: #232327;
  --hs-tile-shadow: none;

  --hs-glass-bg: rgba(52, 52, 62, 0.42);
  --hs-glass-bg-hover: rgba(66, 66, 78, 0.55);
  --hs-glass-edge: rgba(255, 255, 255, 0.14);
  --hs-glass-line: rgba(255, 255, 255, 0.08);
  --hs-glass-fill: rgba(118, 118, 128, 0.24);
  --hs-glass-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --hs-wk-temp-text: #ffb340;

  color-scheme: dark;
}