/* Gestaltungsmarken, übernommen aus exiServer (frontend/tokens.css), damit
   beide Anwendungen gleich aussehen und Bauteile austauschbar bleiben.
   Die Namen sind absichtlich identisch.

   Komponenten lesen ausschliesslich var() - nie ein Hexwert im Bauteil, sonst
   bricht der Themenwechsel. Dieselbe Regel gilt in der Technikdatei. */

:root {
  /* Formmarken: in beiden Themen gleich */
  --radius: 16px;
  --r-1: 10px; --r-2: 16px; --r-3: 16px; --r-4: 20px; --r-pill: 100px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --duration: .2s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-focus: 0 0 0 4px var(--accent-soft);
}

/* ---------- dunkel: Navy und Gold wie exiServer ---------- */
/* Seit 10.11.2026 im Cockpit-Look des Decks "Homeserver Redesign": fast
   schwarzer Grund, flache Karten mit feinem Rand, Gold als einzige
   Akzentfarbe. Namen unverändert, nur die Werte. */
html[data-theme="dark"] {
  --bg: #0a0e13;
  --panel-a: #111821;
  --panel-b: #111821;
  --panel-gold: rgba(201, 162, 39, .18);
  --panel-gold-strong: rgba(201, 162, 39, .32);
  --gold: #f5b83d;
  --gold-deep: #c9952a;
  --solar: #f5b83d;
  --ink: #e8eef5;
  --ink-mid: #b9c4d2;
  --ink-dim: #a9b6c6;
  --ink-faint: #8e9bad;
  --green: #3ecf8e;
  --amber: #e8a13a;
  --red: #e5484d;
  --blue: #46b3e6;

  --text: var(--ink);
  --text-muted: var(--ink-mid);
  --text-subtle: var(--ink-faint);
  --border: var(--panel-gold);
  --success: var(--green);
  --danger: var(--red);
  --warning: var(--amber);
  --success-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--red) 14%, transparent);
  --warning-soft: color-mix(in srgb, var(--amber) 14%, transparent);
  --bg-elevated: var(--panel-a);
  --surface: #0a0e13;
  --surface-border: #243041;
  --surface-strong: rgba(255, 255, 255, .12);
  --solar-tint-bg: linear-gradient(180deg, rgba(38, 32, 12, .55), var(--panel-b));
  --solar-tint-border: rgba(242, 193, 78, .24);
  --atmosphere-bg: #0a0e13;
  --topbar-bg: rgba(10, 14, 19, .92);
  --rail-bg: #0a0e13;

  /* Karten: flach, feiner Rand statt Leuchten */
  --card-bg: var(--panel-a);
  --shadow-0: none;
  --shadow-1: none;
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .35);

  --accent: #e8571e;
  --accent-light: #f97316;
  --accent-soft: rgba(232, 87, 30, .14);
  --accent-mid: rgba(232, 87, 30, .3);
  --accent-hover: #f97316;
  --accent-border: rgba(232, 87, 30, .3);
  --border-strong: rgba(255, 255, 255, .2);

  /* Medienfarben der Anlage - gleiche Zuordnung wie in der Technikdatei */
  --gly-vl:  #e5484d;   /* Vorlauf, Glykol */
  --hz-rl:   #46b3e6;   /* Rücklauf, Heizwasser */
  --sole:    #a78bfa;   /* Sole und Signale */
  --cool-r:  #38bdf8;   /* Kühlung, AC */
  --copper:  #e3c766;   /* Batterie-DC, Erzeugung */
  --raum:    #3ecf8e;   /* Raumtemperatur */
}

/* Aufteilung des Stroms und Geschosse (Deck "Homeserver Redesign") */
html[data-theme="dark"] {
  --e-wp: #ff7a45; --e-ww: #4ca8ff; --e-rest: #8e9bad; --e-schiene: #1a2330;
  --gs-og: #8fd1c2; --gs-eg: #ffb067; --gs-kg: #6cb6ff;
}
html[data-theme="light"] {
  --e-wp: #d9541f; --e-ww: #2f7fb0; --e-rest: #a89c92; --e-schiene: #ede7df;
  --gs-og: #2a8f7b; --gs-eg: #c46a12; --gs-kg: #2f7fb0;
}

/* ---------- hell: warmes Creme mit Orange ---------- */
html[data-theme="light"] {
  --bg: #faf8f5;
  --bg-elevated: #ffffff;
  --surface: #f5f2ee;
  --surface-border: #e8e2da;
  --surface-strong: #ded6cb;
  --border: #e8e2da;
  --text: #1a1614;
  --text-muted: #7a6f68;
  --text-subtle: #b0a59d;

  --gold: #c9a227;
  --gold-deep: #a9821c;
  --solar: #d97706;
  --ink: var(--text);
  --ink-mid: #4a423c;
  --ink-dim: #6b5f58;
  --ink-faint: #a89c92;
  --green: #2d8a5e;
  --amber: #d97706;
  --red: #c0392b;
  --blue: #2f7fb0;

  --panel-a: #ffffff;
  --panel-b: #ffffff;
  --panel-gold: var(--border);
  --panel-gold-strong: #d4a828;
  --solar-tint-bg: linear-gradient(180deg, #fff8ee, var(--bg-elevated));
  --solar-tint-border: rgba(217, 119, 6, .25);
  --atmosphere-bg: radial-gradient(120% 90% at 78% -10%, #fff6ec 0%, #faf8f5 42%, #faf8f5 100%);
  --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .75));
  --rail-bg: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3));

  --success: var(--green);
  --danger: var(--red);
  --warning: var(--amber);
  --success-soft: #e8f5ef;
  --danger-soft: #fef0ee;
  --warning-soft: #fef9ec;

  /* Karten: echte Schlagschatten auf Weiss, mit Anheben beim Zeigen */
  --card-bg: var(--bg-elevated);
  --shadow-0: 0 1px 3px rgba(80, 50, 30, .06);
  --shadow-1: 0 4px 16px rgba(80, 50, 30, .08);
  --shadow-2: 0 8px 32px rgba(80, 50, 30, .12);

  --accent: #e8571e;
  --accent-light: #f97316;
  --accent-soft: #fff4ef;
  --accent-mid: #fde8dc;
  --accent-hover: #c0392b;
  --accent-border: #fde8dc;
  --border-strong: #d4cbc2;

  --gly-vl:  #c0392b;
  --hz-rl:   #2f7fb0;
  --sole:    #7c5cd6;
  --cool-r:  #2f7fb0;
  --copper:  #a9821c;
  --raum:    #2d8a5e;
}

/* ── Brücke zu den Zeigerinstrumenten (hs-gauges.js) ────────────────────────
   Der Entwurf bringt eigene --hs-*-Variablen mit und war auf Dunkel
   festgelegt. Statt ein zweites Tokenset danebenzustellen, werden sie hier
   aus den vorhandenen abgeleitet - so bleibt diese Datei die einzige Stelle,
   an der Farben stehen, und die Instrumente folgen dem Themenwechsel.

   --hs-card und --hs-card-line sind bewusst durchsichtig: die Karte zeichnet
   schon die Oberfläche, eine zweite Umrandung darin sähe nach Kästchen im
   Kästchen aus. Übernommen ist das Instrument, nicht der Rahmen. */
:root {
  --hs-text: var(--text);
  --hs-muted: var(--text-muted);
  --hs-line: var(--border);
  --hs-surface: var(--surface);
  --hs-card: transparent;
  --hs-card-line: transparent;
  --hs-card-line-hover: transparent;
  --hs-card-shadow: none;
  --hs-radius: var(--r-2);
  --hs-ok: var(--success);
  --hs-warn: var(--warning);
  --hs-bad: var(--danger);
  /* Barlow statt Oxanium: die Oberfläche soll ohne Internet laufen, und ein
     @import von fonts.googleapis.com liefert auf einem Pi ohne Netz still die
     Ersatzschrift. Oxanium lässt sich später lokal ablegen. */
  --hs-font-num: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --hs-font-mono: 'Barlow', ui-monospace, monospace;
}

html[data-theme="dark"] {
  --hs-off: rgba(255, 255, 255, .09);
  --hs-needle: #fff;
  --hs-needle-glow: rgba(255, 255, 255, .7);
}

/* Im hellen Thema ist ein weisser Zeiger auf heller Karte unsichtbar, und ein
   weisser Schleier auf Weiss auch. Beides kehrt sich um. */
html[data-theme="light"] {
  --hs-off: rgba(26, 22, 20, .10);
  --hs-needle: var(--text);
  --hs-needle-glow: rgba(26, 22, 20, .35);
}

/* Wetter (07.11.2026): Rampenfarben als Token, damit das helle Thema eigene,
   dunklere Stufen bekommt - Cyan auf Creme ist unlesbar. Die Rampen in
   hs-gauges.js (RAMPS) bleiben die begruendete Ausnahme fuer die
   Zifferblaetter; die Wetterseite liest nur diese Tokens. */
html[data-theme="dark"] {
  --rampe-t0: #34c8f0; --rampe-t14: #5ef0c1; --rampe-lux: #ffb547; --rampe-wind: #5ef0c1;
  --vh-rand: rgba(169, 192, 212, .35); --vh-grund: rgba(255, 255, 255, .015);
}
html[data-theme="light"] {
  --rampe-t0: #1f86b5; --rampe-t14: #1f9d78; --rampe-lux: #b7790f; --rampe-wind: #2d8a5e;
  --vh-rand: #cfc5b9; --vh-grund: #fbf9f6;
}