/**
 * XtremScan App — Design Tokens
 * Hallmark · genre: modern-minimal · shell: Workbench · design.md App-Dark
 * Quelle: .claude/rules/design-bible.md + design.md
 * 2026-08-09: Premium-Pass — Tiefenstaffelung statt Neon-Glanz
 * Hausregel: keine verbotenen Markenfarben (siehe Design-Bibel) @allow-color
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
:root {
  /* Design-Bibel Dark — 4 Ebenen */
  --color-bg: #080A0F;
  --color-bg-mid: #0E1118;
  --color-surface: #151B26;
  --color-surface-elevated: #1a2230;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-focus: rgba(59, 127, 255, 0.55);

  --color-accent: #3B7FFF;
  --color-accent-2: #2563EB;
  --color-warm: #F97316;
  --color-ok: #22C55E;
  --color-danger: #EF4444;

  --color-text: #F0F4FF;
  --color-text-muted: #7A8BA8;
  --color-text-dim: #3D4D63;

  /* Aliase für bestehendes Markup/JS */
  --bg-dark: var(--color-bg);
  --bg-surface: var(--color-surface);
  --bg-surface-elevated: var(--color-surface-elevated);
  --bg-card: rgba(21, 27, 38, 0.92);
  --bg-glass: rgba(21, 27, 38, 0.72);
  --glass-border: var(--color-border);
  --text-primary: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-dim);
  --accent-primary: var(--color-accent);
  --accent-primary-strong: var(--color-accent-2);
  /* früher Glow — jetzt dezenter Flächen-Akzent ohne Leuchten */
  --accent-primary-glow: rgba(59, 127, 255, 0.12);
  --accent-success: var(--color-ok);
  --brand-black: #080A0F;
  --border-subtle: var(--color-border);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-focus: var(--color-border-focus);

  /* Legacy-Namen bleiben, zeigen aber auf ruhige Akzente (kein Neon) */
  --color-neon-blue: var(--color-accent);
  --color-neon-blue-strong: var(--color-accent-2);
  --color-neon-green: var(--color-ok);
  --color-neon-cyan: var(--color-accent);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius: var(--radius-md);

  /* 8px-Raster (Design-Bibel) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* Tiefenstaffelung statt Leuchten */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --shadow-raised: 0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
  /* glow-Aliase entkernt — zeigen auf Tiefen-Schatten */
  --shadow-glow: var(--shadow-soft);
  --shadow: var(--shadow-card);
  --shadow-neon: var(--shadow-soft);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 300ms;
  --transition-fast: 0.15s var(--ease);
  --transition-base: 0.22s var(--ease);

  --shell-max: 440px;
  --shell-max-desktop: 480px;
  --touch: 48px;
}