/* ==========================================
   CSS Custom Properties (Variables)
   Dark Mode (Default) + Light Mode
   ========================================== */

:root {
  --bp-primary: #0f766e;
  --bp-primary-soft: #ccfbf1;
  --bp-bg: #020617;
  --bp-surface: #020617;
  --bp-surface-elevated: rgba(15,23,42,0.9);
  --bp-border: #1f2937;
  --bp-border-subtle: rgba(148,163,184,0.25);
  --bp-accent: #22c55e;
  --bp-accent-soft: rgba(34,197,94,0.2);
  --bp-text: #e5e7eb;
  --bp-text-muted: #9ca3af;
  --bp-danger: #ef4444;
  --bp-gradient-bg: radial-gradient(circle at top left, #1f2937 0, #020617 50%, #000 100%);
  --bp-gradient-surface: radial-gradient(circle at top left, rgba(15,23,42,0.9) 0, #020617 50%, #000 100%);
  --bp-gradient-sidebar: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
  --bp-gradient-topbar: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.6));
  --bp-btn-primary-bg: linear-gradient(to right, var(--bp-primary), #15803d);
  --bp-btn-primary-hover: linear-gradient(to right, #0f766e, #166534);
  --bp-card-bg: var(--bp-gradient-surface);
  --bp-input-bg: rgba(255,255,255,0.05);
  --bp-scrollbar-track: rgba(15,23,42,0.5);
  --bp-scrollbar-thumb: rgba(148,163,184,0.5);
}

/* ==========================================
   LIGHT MODE - Website Design
   Farben aus BreakPilot Website:
   - Primary: Sky Blue #0ea5e9 (Modern, Vertrauen)
   - Accent: Fuchsia #d946ef (Kreativ, Energie)
   - Text: Slate #0f172a (Klarheit)
   - Background: White/Slate-50 (Clean, Professional)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

[data-theme="light"] {
  --bp-primary: #0ea5e9;
  --bp-primary-soft: rgba(14, 165, 233, 0.1);
  --bp-bg: #f8fafc;
  --bp-surface: #FFFFFF;
  --bp-surface-elevated: #FFFFFF;
  --bp-border: #e2e8f0;
  --bp-border-subtle: rgba(14, 165, 233, 0.2);
  --bp-accent: #d946ef;
  --bp-accent-soft: rgba(217, 70, 239, 0.15);
  --bp-text: #0f172a;
  --bp-text-muted: #64748b;
  --bp-danger: #ef4444;
  --bp-gradient-bg: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  --bp-gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
  --bp-gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, #f1f5f9 100%);
  --bp-gradient-topbar: linear-gradient(to right, #FFFFFF, #f8fafc);
  --bp-btn-primary-bg: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
  --bp-btn-primary-hover: linear-gradient(135deg, #0284c7 0%, #c026d3 100%);
  --bp-card-bg: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
  --bp-input-bg: #FFFFFF;
  --bp-scrollbar-track: rgba(0,0,0,0.05);
  --bp-scrollbar-thumb: rgba(14, 165, 233, 0.3);
  --bp-gold: #eab308;
}

[data-theme="light"] body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}