/* UBC TacLink — Design Tokens
   Skin-abhaengig: classic = heutige Palette (unveraendert), new = Reskin (dark + light).
   Bestehende Variablennamen sind Aliase, damit alte Seiten in beiden Skins ohne Bruch laufen. */

:root {
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
}

/* ===== CLASSIC: exakt heutige Palette ===== */
[data-skin="classic"] {
  --bg-dark: #0d1117;
  --bg-elev: #161b22;
  --accent: #4fc3f7;
  --accent-dim: rgba(79, 195, 247, 0.15);
  --border: rgba(255, 255, 255, 0.12);
  --text: #e6edf3;
  --text-dim: #9aa7b4;
  --text-muted: #6b7682;
  --success: #4caf50;
  --warning: #ffb74d;
  --red: #f44336;
}

/* ===== NEW (dark) ===== */
[data-skin="new"][data-theme="dark"],
[data-skin="new"]:not([data-theme]) {
  --surface-base: #050b14;
  --surface-1: #0d1625;
  --surface-2: #111e30;
  --surface-overlay: #0d1625;
  --text-primary: #ffffff;
  --text-secondary: #a0afc3;
  --text-muted-c: #6f8098;
  --accent: #1fa8ff;
  --accent-hover: #4dc0ff;
  --accent-dim-c: rgba(31, 168, 255, 0.15);
  --success: #4caf50;
  --warning: #ffb74d;
  --danger: #f44336;
  --info: #1fa8ff;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* Kompat-Aliase auf Bestand */
  --bg-dark: var(--surface-base);
  --bg-elev: var(--surface-1);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-muted: var(--text-muted-c);
  --accent-dim: var(--accent-dim-c);
  --red: var(--danger);
}

/* ===== NEW (light) ===== */
[data-skin="new"][data-theme="light"] {
  --surface-base: #f5f7fa;
  --surface-1: #ffffff;
  --surface-2: #eef1f6;
  --surface-overlay: #ffffff;
  --text-primary: #1a1f29;
  --text-secondary: #516072;
  --text-muted-c: #8a97a6;
  --accent: #0a84d6;
  --accent-hover: #0a6fb5;
  --accent-dim-c: rgba(10, 132, 214, 0.12);
  --success: #2e8b3d;
  --warning: #c77700;
  --danger: #d32f2f;
  --info: #0a84d6;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);

  --bg-dark: var(--surface-base);
  --bg-elev: var(--surface-1);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-muted: var(--text-muted-c);
  --accent-dim: var(--accent-dim-c);
  --red: var(--danger);
}