/* CSS-Tokens der Schichtplanung-v2-Optik, herausgeloest aus dem inline <style>-Block von
   public/schichtplanung.html (Schritt 2 des Sidebar-Umbaus, siehe
   .claude/plans/melodic-spinning-reddy.md). Der :root-Block unten ist 1:1 (unveraenderte
   Werte) aus schichtplanung.html uebernommen - styles.css referenziert dieselben
   Variablennamen bereits, daher hier keine Umbenennung.

   Jede Seite, die diese Optik nutzt (aktuell nur schichtplanung.html, ab Schritt 3-5 auch
   team.html/urlaub.html/objekte.html), bindet diese Datei per <link> ein. */

:root {
  --bg-surface: #ffffff;
  --bg-surface-alt: #f6f5f1;
  --bg-surface-hover: #eae7e0;
  --text-primary: #14161a;
  --text-secondary: #565b63;
  --text-tertiary: #a2a099;
  --border-default: #e6e3dc;
  --border-strong: #d7d3ca;
  --shadow-sm: 0 1px 3px rgba(20,22,26,.08);
  --shadow-md: 0 4px 12px rgba(20,22,26,.10);
  --shadow-lg: 0 16px 44px rgba(20,22,26,.18);
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 11px;
  --radius-full: 999px;
  --signal-red: #dc2626;
  --signal-red-light: #fee2e2;
  --signal-green: #16a34a;
  --signal-amber: #f59e0b;
  /* Design-Akzent (Cobalt) */
  --np-accent: #1f5bff;
  --np-accent-deep: #1742c8;
  --np-accent-soft: #eef3ff;
  --np-paper: #e9e6e0;
  /* Fuer das wiederverwendete .sp-dd/.sp-dd-menu/.sp-dd-item-Muster aus styles.css
     (Benutzer-Menue) - dieselben Werte wie dort, unter den hier schon etablierten
     np-*-Namen dieser Shell-Seite ergaenzt. */
  --np-line: #e6e3dc;
  --np-ink: #14161a;
  --np-ink2: #565b63;
  --font-family-base: 'Hanken Grotesk', system-ui, sans-serif;
  --font-family-head: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-family-icons: 'Material Icons';
  --font-family-mono: 'Courier New', monospace;
  --font-size-0: 10px;
  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 18px;
  --font-size-4: 22px;
  --font-size-8: 56px;
  --font-weight-bold: 700;
  --font-weight-heavy: 700;

  /* Sidebar-Chrome (public/js/np-sidebar.js): eigene Tokens statt --bg-surface/--text-*
     zu missbrauchen, weil die Sidebar laut Screenshot IMMER ein dunkler Rail ist - auch
     im Hell-Theme (--data-theme unbesetzt bzw. "light"). Nur diese Tokens hier duerfen
     sich zwischen den beiden Themes unterscheiden (siehe dark-Block unten), das Raster
     selbst (styles.css) bleibt in diesem Schritt bewusst unangetastet/hell. */
  --npsb-width: 68px;
  --npsb-bg: #14161a;
  --npsb-bg-top: #1b1d22;
  --npsb-icon: #9a9ea7;
  --npsb-icon-hover: #e8e9ec;
  --npsb-icon-active: #ffffff;
  --npsb-active-bg: rgba(31, 91, 255, .28);
  --npsb-divider: rgba(255, 255, 255, .08);
  --npsb-avatar-fg: #ffffff;
}

/* Dunkles Theme: NEU in diesem Schritt, wird aktuell nur von der Sidebar-Chrome und
   (ab Schritt 3-5) den brandneuen Seiten benutzt - siehe np-sidebar.js. Das bestehende
   Planungsraster (styles.css, >6000 Zeilen groesstenteils fester Hex-Werte) bleibt
   bewusst ausserhalb: eine vollstaendige Dark-Mode-Konvertierung dort ist ein separater,
   spaeterer Schritt (siehe Bau-Reihenfolge im Plan). */
:root[data-theme="dark"] {
  --bg-surface: #14161a;
  --bg-surface-alt: #1b1d22;
  --bg-surface-hover: #23262c;
  --text-primary: #e8e9ec;
  --text-secondary: #a7abb3;
  --text-tertiary: #6b6f78;
  --border-default: #2a2d34;
  --border-strong: #383c44;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.40);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.55);
  --signal-red: #f87171;
  --signal-red-light: #451a1a;
  --signal-green: #4ade80;
  --signal-amber: #fbbf24;
  --np-accent: #4d80ff;
  --np-accent-deep: #6f97ff;
  --np-accent-soft: #1c2740;
  --np-paper: #0f1115;
  --np-line: #2a2d34;
  --np-ink: #e8e9ec;
  --np-ink2: #a7abb3;

  --npsb-bg: #0b0c0f;
  --npsb-bg-top: #101114;
  --npsb-active-bg: rgba(77, 128, 255, .32);
  --npsb-divider: rgba(255, 255, 255, .06);
}