/* DADDYVERSE Design-Tokens v1 — eine Wahrheit fuer Website und Dashboard.
   Marke: OekoDaddy ("Oeko" = oekonomisch/effizient). Claim "Build. Automate. Enjoy."
   Bestandsnamen (--bg, --bg2, --ink, --muted, --accent, --accent2, --accent3,
   --leaf, --card, --line, --radius, --font) bleiben unveraendert, damit
   oekosite/assets/style.css unveraendert weiterlaeuft.
   Laufzeit-Variablen, die JS setzt und die hier bewusst NICHT stehen (sie haben
   im Stylesheet eigene Fallbacks): --mx, --my (Karten-Glanz, app.js),
   --p (Slider-Fuellstand, rechner.js/strom.js).
   Drei Vibes bleiben: Standard (dunkelgruen), [data-vibe=sunny], [data-vibe=night]. */

:root{
  /* ---- Flaechen ---- */
  --bg:#07140e;            /* Dunkelgruen, Grundflaeche */
  --bg2:#0b1f15;           /* Dunkelgruen, zweite Ebene */
  --anthrazit:#1b2026;     /* Anthrazit, Technik-/Code-Flaechen */
  --schwarz:#0a0c0d;       /* Schwarz, maximale Tiefe */
  --card:color-mix(in srgb,var(--bg) 88%,#ffffff 8%);
  --line:rgba(255,255,255,.09);

  /* ---- Schrift ---- */
  --ink:#eafff3;
  --muted:#9fc8b2;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;

  /* ---- Akzente ---- */
  --accent:#39e08a;        /* Neongruen, Primaerakzent */
  --neon:#39e08a;
  --accent2:#c7ff6b;       /* Limette, Verlaufspartner */
  --accent3:#ffd166;       /* Solar-Gelb */
  --solar:#ffd166;
  --leaf:#5bbf72;
  --on-accent:#07140e;     /* Text auf Akzentflaechen */

  /* ---- Zustaende (vibe-unabhaengig, damit Warnungen immer gleich lesen) ---- */
  --good:#3ddc84;          /* ok / online / erledigt */
  --warn:#ffd166;          /* Achtung / wartet */
  --bad:#ff5f6d;           /* Fehler / offline */
  --info:#53e0ff;          /* Hinweis / neutral */
  --spam:#ff8a8a;          /* Spam-Markierung (Dashboard) */
  --ok:var(--good);        /* Alias */
  --fehler:var(--bad);     /* Alias */

  /* ---- Form ---- */
  --radius:22px;           /* Website-Karten */
  --radius-ui:14px;        /* dichte Oberflaechen (Dashboard) */
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-ui:0 6px 20px rgba(0,0,0,.35);
  --border-w:1px;

  /* ---- Abstaende (4px-Raster) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:22px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --gap:var(--space-3);
  --pad-card:var(--space-5);
  --maxw:1320px;

  /* ---- Schriftgroessen-Stufen ---- */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-h1:clamp(28px,4.2vw,46px);
  --lh-tight:1.2;
  --lh:1.55;
  --ls-tight:-.3px;
  --fw-med:600;
  --fw-bold:800;

  /* ---- Bereichsfarben Daddyverse ---- */
  --area-labs:#39e08a;     /* Labs — Entwicklung/Experimente */
  --area-ai:#7c9cff;       /* AI — lokale LLMs, Agents */
  --area-home:#ffd166;     /* Home — Smart Home, PV, Energie */
  --area-lab:#53e0ff;      /* Lab — Docker, Proxmox, Selfhosting */
  --area-craft:#c7ff6b;    /* Craft — Minecraft, Gaming */
  --area-forge:#ff8a5b;    /* Forge — 3D-Druck, Maker */
  --area-garage:#ff5f6d;   /* Garage — Auto, OBD, Wallbox */

  /* ---- Bruecke zum Dashboard (dessen Bestandsnamen) ---- */
  --panel:#0b1f15;
  --panel2:color-mix(in srgb,var(--bg2) 88%,#ffffff 7%);
  --border:var(--line);
  --fg:#eafff3;
  --mono:var(--font-mono);
}

/* Vibe "sunny" — warm. Abgeleitete Tokens werden mitgezogen,
   weil var() in Custom Properties am Deklarations-Element aufgeloest wird. */
body[data-vibe=sunny]{
  --bg:#17100a;--bg2:#241708;--ink:#fff4e6;--muted:#e0b98f;
  --accent:#ffb347;--accent2:#ffd166;--accent3:#ff7a59;
  --neon:#ffb347;--solar:#ffd166;--on-accent:#17100a;
  --card:color-mix(in srgb,var(--bg) 88%,#ffffff 8%);
  --panel:#241708;--panel2:color-mix(in srgb,var(--bg2) 88%,#ffffff 7%);--fg:#fff4e6;
}

/* Vibe "night" — kuehl. */
body[data-vibe=night]{
  --bg:#070a16;--bg2:#0c1226;--ink:#e8ecff;--muted:#9aa6d6;
  --accent:#7c9cff;--accent2:#b388ff;--accent3:#53e0ff;
  --neon:#7c9cff;--solar:#53e0ff;--on-accent:#070a16;
  --card:color-mix(in srgb,var(--bg) 88%,#ffffff 8%);
  --panel:#0c1226;--panel2:color-mix(in srgb,var(--bg2) 88%,#ffffff 7%);--fg:#e8ecff;
}