/* ═══════════════════════════════════════════════════
   PIOUSTRACK DESIGN SYSTEM — CSS VARIABLES
   Piouswood Solution · v2.0 (Cyan Dark)
═══════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ────────────────────────────────── */
  --color-bg-base: #0a0a0c;
  --color-bg-surface: #15151a;
  --color-bg-elevated: #1d1d24;
  --color-bg-overlay: #22222a;
  --color-bg-input: #0a0a0c;

  /* ── Borders ────────────────────────────────────── */
  --color-border-default: #22222a;
  --color-border-subtle: #1a1a20;
  --color-border-strong: #2c2c36;
  --color-border-focus: #00d9ff;

  /* ── Text ────────────────────────────────────────── */
  --color-text-primary: #f5f5f7;
  --color-text-secondary: #a0a0b0;
  --color-text-tertiary: #6a6a78;
  --color-text-inverse: #0a0a0c;

  /* ── Accent: Electric Cyan ────────────────────── */
  --color-accent: #00d9ff;
  --color-accent-hover: #3de4ff;
  --color-accent-muted: rgba(0, 217, 255, 0.15);
  --color-accent-border: rgba(0, 217, 255, 0.35);
  --color-accent-dim: #007a8f;
  --color-accent-glow: rgba(0, 217, 255, 0.45);

  /* ── Neon-Palette (frei einsetzbar für Sections, Charts, Highlights) ──── */
  --neon-cyan: #00d9ff;
  --neon-cyan-muted: rgba(0, 217, 255, 0.15);
  --neon-cyan-glow: rgba(0, 217, 255, 0.45);

  --neon-magenta: #ff2e88;
  --neon-magenta-muted: rgba(255, 46, 136, 0.15);
  --neon-magenta-glow: rgba(255, 46, 136, 0.45);

  --neon-lime: #b6ff3c;
  --neon-lime-muted: rgba(182, 255, 60, 0.15);
  --neon-lime-glow: rgba(182, 255, 60, 0.45);

  --neon-violet: #a855ff;
  --neon-violet-muted: rgba(168, 85, 255, 0.15);
  --neon-violet-glow: rgba(168, 85, 255, 0.45);

  --neon-amber: #ffb627;
  --neon-amber-muted: rgba(255, 182, 39, 0.15);
  --neon-amber-glow: rgba(255, 182, 39, 0.45);

  --neon-coral: #ff5c5c;
  --neon-coral-muted: rgba(255, 92, 92, 0.15);
  --neon-coral-glow: rgba(255, 92, 92, 0.45);

  --neon-mint: #3dffc0;
  --neon-mint-muted: rgba(61, 255, 192, 0.15);
  --neon-mint-glow: rgba(61, 255, 192, 0.45);

  /* Section-Akzent (per data-section überschrieben) — Default = Cyan */
  --section-accent: var(--neon-cyan);
  --section-accent-muted: var(--neon-cyan-muted);
  --section-accent-glow: var(--neon-cyan-glow);

  /* ── Semantic Colors ────────────────────────────– */
  --color-success: #4ade80;
  --color-success-muted: rgba(74, 222, 128, 0.15);
  --color-warning: #ff9f43;
  --color-warning-muted: rgba(255, 159, 67, 0.15);
  --color-danger: #ef4444;
  --color-danger-muted: rgba(239, 68, 68, 0.15);
  --color-info: #00d9ff;
  --color-info-muted: rgba(0, 217, 255, 0.15);

  /* ── Slot Colors (Tagesverlauf) ──────────────────– */
  --color-slot-morning: #5b9cf6;
  --color-slot-morning-muted: rgba(91, 156, 246, 0.15);
  --color-slot-afternoon: #ffd23f;
  --color-slot-afternoon-muted: rgba(255, 210, 63, 0.15);
  --color-slot-sundowner: #ff7a2e;
  --color-slot-sundowner-muted: rgba(255, 122, 46, 0.15);
  --color-slot-warmup: #ff9f43;
  --color-slot-warmup-muted: rgba(255, 159, 67, 0.15);
  --color-slot-peak: #ff2e88;
  --color-slot-peak-muted: rgba(255, 46, 136, 0.15);
  --color-slot-after: #7a3cff;
  --color-slot-after-muted: rgba(122, 60, 255, 0.15);

  /* ── Software Badge Colors ──────────────────────– */
  --color-sw-serato: #ff7a2e;
  --color-sw-serato-muted: rgba(255, 122, 46, 0.15);
  --color-sw-rekordbox: #00d9ff;
  --color-sw-rekordbox-muted: rgba(0, 217, 255, 0.15);
  --color-sw-virtualdj: #ffd23f;
  --color-sw-virtualdj-muted: rgba(255, 210, 63, 0.15);
  --color-sw-traktor: #3ddfff;
  --color-sw-traktor-muted: rgba(61, 223, 255, 0.15);

  /* ── Typography ────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;

  /* ── Font Sizes ────────────────────────────────── */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-hero: 64px;

  /* ── Font Weights ──────────────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ── Line Heights ──────────────────────────────── */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  /* ── Letter Spacing ────────────────────────────── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.12em;

  /* ── Spacing (4px base grid) ───────────────────– */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────– */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 24px rgba(0, 217, 255, 0.18);
  --shadow-neon: 0 0 12px var(--section-accent-glow), 0 0 24px var(--section-accent-glow);
  --shadow-neon-soft: 0 0 14px var(--section-accent-glow);

  /* ── Transitions ───────────────────────────────– */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* ── Z-Index ───────────────────────────────────– */
  --z-base: 0;
  --z-sidebar: 20;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* ── Layout ────────────────────────────────────– */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 64px;
  --main-padding: 32px;
}