/* ─────────────────────────────────────────────────────────────────────────────
   NuklaroPlan Design System - Tokens (Grundlage fuer die gesamte Arbeitsumgebung)

   Regeln:
   1. Farben, Abstaende, Radien, Schatten, Schriftgroessen kommen AUSSCHLIESSLICH aus
      diesen Tokens. Feste Hex-Werte in Komponenten-CSS sind ein Fehler.
   2. Schichtfarben/Wochenend-Toene im Raster sind Daten bzw. fachliche Signale und
      duerfen eigene Werte haben (siehe styles.css Abschnitt "Raster").
   3. Zwei Namensfamilien existieren bewusst nebeneinander: die Kurznamen der
      Planungsoberflaeche (--bg-surface, --text-primary, ...) und die --np-*-Namen der
      Shell. Beide zeigen auf dieselben Werte, neue Komponenten nutzen die Kurznamen.
   4. Dunkles Theme: nur Tokens hier ueberschreiben, keine Komponenten-Sonderfaelle.

   Dokumentation der Komponenten: /design-system (Styleguide) und css/ds-components.css.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Flaechen ───────────────────────────────────────────────────────────── */
  --bg-canvas: #f3f5f8;          /* Seitenhintergrund hinter den Karten */
  --bg-surface: #ffffff;         /* Karten, Dialoge, Eingabefelder */
  --bg-surface-alt: #f8f9fb;     /* Tabellenkoepfe, Gruppenkoepfe, ruhige Flaechen */
  --bg-surface-hover: #eef1f5;   /* Hover, aktive Zeile, gedrueckt */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text-primary: #0f1729;
  --text-secondary: #4a5468;
  --text-tertiary: #8590a2;      /* Platzhalter, Metadaten (nie fuer Fliesstext) */

  /* ── Linien ─────────────────────────────────────────────────────────────── */
  --border-default: #e3e7ee;
  --border-strong: #ccd3de;

  /* ── Marke / Akzent (Cobalt) ────────────────────────────────────────────── */
  --np-accent: #1f5bff;
  --np-accent-deep: #1544cc;
  --np-accent-soft: #edf2ff;
  --np-accent-ring: rgba(31, 91, 255, .22);

  /* ── Signale ────────────────────────────────────────────────────────────── */
  --signal-red: #d92d20;
  --signal-red-light: #fdecea;
  --signal-green: #12874a;
  --signal-green-light: #e6f5ed;
  --signal-amber: #d97706;
  --signal-amber-light: #fef3dc;

  /* ── Radien ─────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;              /* Eingabefelder, kleine Buttons */
  --radius-md: 10px;             /* Buttons, Chips */
  --radius-lg: 12px;             /* Karten */
  --radius-xl: 16px;             /* Dialoge, grosse Flaechen */
  --radius-full: 999px;

  /* ── Schatten (weich, geschichtet) ──────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 41, .06);
  --shadow-md: 0 1px 2px rgba(15, 23, 41, .05), 0 6px 18px rgba(15, 23, 41, .07);
  --shadow-lg: 0 2px 6px rgba(15, 23, 41, .06), 0 20px 48px rgba(15, 23, 41, .16);
  --shadow-focus: 0 0 0 3px var(--np-accent-ring);
  --overlay: rgba(15, 23, 41, .40);

  /* ── Typografie ─────────────────────────────────────────────────────────── */
  --font-family-base: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-head: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-family-icons: 'Material Icons';
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-0: 11px;           /* Mikrotext, Beschriftungen in Kopfzeilen */
  --font-size-1: 12.5px;         /* Sekundaertext, Tabellen, kleine Buttons */
  --font-size-2: 14px;           /* Standard */
  --font-size-3: 17px;           /* Karten-/Dialogtitel */
  --font-size-4: 22px;           /* Seitentitel */
  --font-size-8: 56px;           /* Zahlen-Hero */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 700;

  /* ── Abstaende (4er-Raster) ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Bewegung ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .12s;
  --dur: .18s;

  /* ── Ebenen ─────────────────────────────────────────────────────────────── */
  --z-sticky: 20;
  --z-topbar: 200;
  --z-dropdown: 400;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ── Kurznamen-Aliase (Planungsoberflaeche/styles.css) ──────────────────── */
  --np-paper: var(--bg-canvas);
  --np-line: var(--border-default);
  --np-ink: var(--text-primary);
  --np-ink2: var(--text-secondary);

  /* ── Sidebar (immer ein dunkler Rail, auch im hellen Theme) ─────────────── */
  --npsb-width: 68px;
  --npsb-bg: #12141a;
  --npsb-bg-top: #191c23;
  --npsb-icon: #9aa1b0;
  --npsb-icon-hover: #eceef3;
  --npsb-icon-active: #ffffff;
  --npsb-active-bg: rgba(31, 91, 255, .30);
  --npsb-divider: rgba(255, 255, 255, .08);
  --npsb-avatar-fg: #ffffff;

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dunkles Theme - nur Tokens. Raster-Signalfarben (Wochenende/Sonntag/Heute,
   Schichtfarben) bleiben bewusst hell, weil sie Daten sind.
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-canvas: #0d0f14;
  --bg-surface: #151820;
  --bg-surface-alt: #1a1e27;
  --bg-surface-hover: #222732;
  --text-primary: #eceef3;
  --text-secondary: #aab1c0;
  --text-tertiary: #767f91;
  --border-default: #262b36;
  --border-strong: #363c4a;
  --np-accent: #4d80ff;
  --np-accent-deep: #7aa0ff;
  --np-accent-soft: #1a2542;
  --np-accent-ring: rgba(77, 128, 255, .32);
  --signal-red: #f87171;
  --signal-red-light: #3b1a1a;
  --signal-green: #4ade80;
  --signal-green-light: #14301f;
  --signal-amber: #fbbf24;
  --signal-amber-light: #372a0e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 48px rgba(0, 0, 0, .60);
  --overlay: rgba(0, 0, 0, .60);

  --npsb-bg: #090a0e;
  --npsb-bg-top: #0e1015;
  --npsb-active-bg: rgba(77, 128, 255, .34);
  --npsb-divider: rgba(255, 255, 255, .06);

  color-scheme: dark;
}