/* Design-Tokens – die Akzentfarbe wird zur Laufzeit aus der Systemkonfiguration gesetzt (--accent) */
:root {
  --accent: #5b82b8;
  --accent2: #8da2bd;
  --dock-size: 52px;
  --accent-hi: color-mix(in srgb, var(--accent) 70%, white);
  --accent-lo: color-mix(in srgb, var(--accent) 55%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);

  /* Vorlage „Anthrazit“ (Standard) */
  --bg-0: #0f1012;
  --bg-1: #16171a;
  --bg-2: #1d1f23;
  --bg-3: #26292e;
  --bg-4: #32363d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #e8eaed;
  --text-2: #b0b5bd;
  --text-3: #7b818b;
  --wp-a: #16181b;
  --wp-b: #25282d;
  --wp-c: #101113;
  --wp-glow: rgba(92, 118, 160, 0.32);

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --info: #60a5fa;
  --mute: #8b93a7;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent-hi); text-decoration: none; }
::selection { background: var(--accent-line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* dezente Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Designvorlagen ── */
html.theme-black { --bg-0: #000000; --bg-1: #060607; --bg-2: #0d0e10; --bg-3: #15171a; --bg-4: #1f2226; --wp-a: #000; --wp-b: #0a0b0c; --wp-c: #000; --wp-glow: rgba(70, 76, 90, 0.28); }
html.theme-midnight { --bg-0: #06041a; --bg-1: #0b0922; --bg-2: #120f30; --bg-3: #1b1744; --bg-4: #272058; --line: rgba(190, 170, 255, 0.10); --line-strong: rgba(190, 170, 255, 0.20); --text-2: #b4acd2; --text-3: #7e75a6; --wp-a: #180a40; --wp-b: #2b0f62; --wp-c: #0f0a4c; --wp-glow: rgba(32, 28, 170, 0.72); }
html.theme-ocean { --bg-0: #050b16; --bg-1: #08111f; --bg-2: #0d1a2e; --bg-3: #132440; --bg-4: #1b3257; --line: rgba(160, 195, 255, 0.10); --line-strong: rgba(160, 195, 255, 0.20); --text-2: #a4b4cc; --text-3: #6d7f9c; --wp-a: #061528; --wp-b: #0c2a4d; --wp-c: #041022; --wp-glow: rgba(30, 100, 200, 0.5); }

/* ── Einstellbare Darstellung (Konfiguration) ── */
html.radius-sharp { --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; }
html.radius-round { --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; }
html.density-compact .win-content { zoom: 0.92; }
html.density-comfortable .win-content { zoom: 1.08; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation: none !important; transition: none !important; }
html.no-glass .panel, html.no-glass .dock, html.no-glass .start-menu, html.no-glass .notif-panel, html.no-glass .lock-card, html.no-glass .modal-root, html.no-glass .lock-overlay { backdrop-filter: none !important; }
html.no-glass .panel, html.no-glass .dock, html.no-glass .start-menu, html.no-glass .lock-card { background: var(--bg-1) !important; }
html.no-widget .desk-widget { display: none; }
html.no-watermark .wallpaper::after { display: none; }
html.wp-gradient .wallpaper::before { display: none; }
html.wp-solid .wallpaper { background: var(--wp-a) !important; }
html.wp-solid .wallpaper::before { display: none; }