/* ============================================
   02 – VARIABLES (Redesign "Midnight Pitch")
   ============================================ */

:root {
  /* ---------- Typografie ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Radien ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Layout ---------- */
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --content-max: 1600px;

  /* ---------- Transitions ---------- */
  --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-slow: 380ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-bounce: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Akzentfarbe (Brand) ---------- */
  --accent-primary: #00E676;
  --accent-primary-strong: #00B85A;
  --accent-primary-soft: #4DFF9E;

  /* ---------- Sekundärfarben ---------- */
  --accent-secondary: #3B82F6;
  --accent-violet: #A78BFA;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* ---------- Safe Areas ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Touch ---------- */
  --touch-min: 44px;
}

/* ============================================
   DARK THEME – "Midnight Pitch"
   ============================================ */

[data-theme="dark"] {
  /* ---------- Hintergrund-Ebenen ---------- */
  --bg-deep: #070A0F;
  --bg-base: #0B1018;
  --bg-surface: #111823;
  --bg-elevated: #1A2330;
  --bg-hover: #232F40;
  --bg-sidebar: #080C12;

  /* ---------- Borders ---------- */
  --border: #1C2735;
  --border-soft: #141C27;
  --border-strong: #2A3A50;
  --border-accent: rgba(0, 230, 118, 0.35);

  /* ---------- Text ---------- */
  --text-primary: #F4F7FA;
  --text-secondary: #A4B0C0;
  --text-muted: #64708A;
  --text-disabled: #3D4757;

  /* ---------- Cards & Surfaces ---------- */
  --surface-gradient: linear-gradient(
    180deg,
    rgba(26, 35, 48, 0.6) 0%,
    rgba(17, 24, 35, 1) 100%
  );

  /* ---------- Schatten ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.65);
  --shadow-sidebar: 0 24px 80px rgba(0, 0, 0, 0.75);

  /* ---------- Glows ---------- */
  --accent-glow: 0 0 0 1px rgba(0, 230, 118, 0.2), 0 0 32px rgba(0, 230, 118, 0.12);
  --accent-glow-strong: 0 0 0 1px rgba(0, 230, 118, 0.35), 0 0 40px rgba(0, 230, 118, 0.25);

  /* ---------- Noise-Textur (Base64 SVG) ---------- */
  --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ============================================
   LIGHT THEME – "Daylight Pitch"
   ============================================ */

[data-theme="light"] {
  --bg-deep: #F4F6F9;
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F4F8;
  --bg-hover: #E6EBF2;
  --bg-sidebar: #FFFFFF;

  --border: #E2E8F0;
  --border-soft: #EDF1F6;
  --border-strong: #CBD5E1;
  --border-accent: rgba(0, 154, 74, 0.35);

  --text-primary: #0A0E14;
  --text-secondary: #4A5568;
  --text-muted: #8B95A5;
  --text-disabled: #CBD5E1;

  --surface-gradient: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.6) 0%,
    #FFFFFF 100%
  );

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.18);
  --shadow-sidebar: 0 24px 80px rgba(15, 23, 42, 0.15);

  --accent-primary: #009A4A;
  --accent-primary-strong: #007A3A;
  --accent-primary-soft: #00B85A;

  --accent-glow: 0 0 0 1px rgba(0, 154, 74, 0.2), 0 0 32px rgba(0, 154, 74, 0.15);
  --accent-glow-strong: 0 0 0 1px rgba(0, 154, 74, 0.35), 0 0 40px rgba(0, 154, 74, 0.25);

  --noise-texture: none;
}