/* ============================================================
   tokens.css — Design-System v3 "Poolside Light" (Phase 5)
   Hell, weiß, weiche farbgetönte Schatten, Blau→Aqua-Verlauf
   als einziger Akzent, dünne Linien-Icons (SVG-Sprite),
   Mobile: Liquid-Glass-Bottom-Nav.
   EINZIGE Quelle für Farben/Typo/Abstände/Radien/Schatten/
   Bewegung — Seiten bauen ausschließlich hierauf.
   ============================================================ */
:root {
  /* ---- Ground & Flächen ---- */
  --bg:        #f2f5f9;
  --bg-soft:   #e9eef5;
  --card:      #ffffff;
  --card-brd:  #eef2f7;

  /* ---- Tinte ---- */
  --ink:       #22304a;
  --ink-soft:  #5d6d8a;
  --ink-mute:  #97a4ba;

  /* ---- Akzent: Wasser-Verlauf ---- */
  --a1: #4a90f4;
  --a2: #3fd0c9;
  --grad: linear-gradient(135deg, var(--a1), var(--a2));
  --grad-soft: linear-gradient(135deg, rgba(74,144,244,.12), rgba(63,208,201,.12));
  --a-ink: #2f7ae0;

  /* ---- Semantik (= Privatsphäre-Sprache) ---- */
  --ok:   #2fbf8f;   /* öffentlich */
  --warn: #eba83a;   /* privat + Trainer */
  --crit: #e8654f;   /* privat */
  --info: #4a90f4;

  /* ---- Schatten (farbgetönt, weich) ---- */
  --sh-1: 0 2px 10px rgba(74,110,244,.06);
  --sh-2: 0 10px 30px rgba(74,110,244,.10);
  --sh-3: 0 18px 44px rgba(74,110,244,.14);
  --sh-grad: 0 10px 26px rgba(74,144,244,.35);

  /* ---- Liquid Glass (Bottom-Nav, Overlays) ---- */
  --glass:     rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.9);
  --blur: 22px;

  /* ---- Typografie ---- */
  --font: 'Satoshi', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.4rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.85rem);
  --text-3xl: clamp(1.95rem, 1.6rem + 1.6vw, 2.4rem);
  --text-4xl: clamp(2.4rem, 1.9rem + 2.4vw, 3.1rem);
  --lh-tight: 1.15; --lh-body: 1.55;
  --track-tight: -.02em;

  /* ---- Raum ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.2rem);
  --content-max: 1200px;

  /* ---- Radien ---- */
  --r-s:12px; --r-m:16px; --r-l:22px; --r-xl:28px; --r-full:999px;

  /* ---- Bewegung ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 380ms;

  /* ---- Touch / Safe Areas ---- */
  --touch: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  --bottomnav-h: calc(74px + var(--safe-bottom));

  color-scheme: light dark;
}

/* ============================================================
   Guard gegen Alt-style.css: Beide Alt-Stylesheets (static/css/
   style.css, zeiterfassung/static/css/style.css) laden NACH
   tokens.css und überschreiben :root-Variablen (--bg als heller
   Gradient, --blur als blur(22px) → macht blur(var(--blur))
   invalide, --nav-h, --font). Dieser Block re-assertet die
   v3-Tokens mit Spezifität (0,2,0); das Boot-Skript setzt
   data-theme immer, daher greift der Guard auf allen v3-Seiten.
   Die Dark-Blöcke unten (gleiche Spezifität, später in der
   Kaskade bzw. später geladen als dieser Block) überschreiben
   weiterhin regulär.
   ============================================================ */
:root[data-theme] {
  --bg: #f2f5f9;
  --blur: 22px;
  --nav-h: 64px;
  --font: 'Satoshi', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', sans-serif;
}

/* Dark Mode — abgedunkelt, nicht invertiert; Grundstimmung bleibt kühl */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#131a26; --bg-soft:#0e141e; --card:#1b2434; --card-brd:#243043;
    --ink:#e9eef7; --ink-soft:#a6b3c9; --ink-mute:#6e7d96;
    --a-ink:#6aa8ff;
    --sh-1:0 2px 10px rgba(0,0,0,.3); --sh-2:0 10px 30px rgba(0,0,0,.38);
    --sh-3:0 18px 44px rgba(0,0,0,.46);
    --glass: rgba(27,36,52,.72); --glass-brd: rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] {
  --bg:#131a26; --bg-soft:#0e141e; --card:#1b2434; --card-brd:#243043;
  --ink:#e9eef7; --ink-soft:#a6b3c9; --ink-mute:#6e7d96;
  --a-ink:#6aa8ff;
  --sh-1:0 2px 10px rgba(0,0,0,.3); --sh-2:0 10px 30px rgba(0,0,0,.38);
  --sh-3:0 18px 44px rgba(0,0,0,.46);
  --glass: rgba(27,36,52,.72); --glass-brd: rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}