/* ─── Dark mode (default) ───────────────────────────────── */
:root {
  /* Brand Colors */
  --clr-primary:        #7C3AFF;
  --clr-primary-light:  #9B5FFF;
  --clr-primary-dark:   #5B1FE0;
  --clr-accent:         #FF6B35;
  --clr-accent-2:       #FF3CAC;

  /* Gradients */
  --grad-brand:    linear-gradient(135deg, var(--clr-primary), var(--clr-accent-2));
  --grad-hero:     linear-gradient(135deg, #0D0720 0%, #1A0840 50%, #0A1020 100%);
  --grad-card:     linear-gradient(145deg, rgba(124,58,255,.12), rgba(255,60,172,.06));
  --grad-text:     linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-2));

  /* Backgrounds */
  --bg-base:       #07070F;
  --bg-surface:    #0F0F20;
  --bg-elevated:   #161628;
  --bg-overlay:    rgba(124,58,255,.08);
  --bg-card:       #13132A;
  --bg-body:       #0A0A1A;
  --bg-subtle:     rgba(255,255,255,.04);

  /* Text */
  --txt-primary:   #FFFFFF;
  --txt-secondary: #C4C4DC;
  --txt-muted:     #7878A0;
  --txt-on-accent: #FFFFFF;

  /* Border */
  --border:        rgba(255,255,255,.08);
  --border-soft:   rgba(255,255,255,.10);
  --border-medium: rgba(255,255,255,.18);
  --border-accent: rgba(124,58,255,.4);

  /* Status */
  --clr-success: #10B981;
  --clr-warning: #FBBF24;
  --clr-danger:  #EF4444;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.5);
  --shadow-glow: 0 0 60px rgba(124,58,255,.3);
  --shadow-glow-accent: 0 0 40px rgba(255,107,53,.25);

  /* Transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Z-index */
  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-modal:  100;
  --z-overlay: 200;
  --z-top:    300;

  /* ─── Layout Geometry ─────────────────────────────────────
     Hier alle Breiten anpassen — wirkt auf alle Views.
     --layout-max-* = max-width von .app-main je Breakpoint   */
  --layout-sidebar:   220px;   /* Sidebar-Nav ab 900px        */
  --layout-max-sm:    720px;   /* ≥600px  (Tablet hoch)       */
  --layout-max-md:    920px;   /* ≥1024px (Laptop)            */
  --layout-max-lg:   1120px;   /* ≥1280px (Desktop)           */
  --layout-max-xl:   1380px;   /* ≥1536px (Wide)              */
}

/* ─── Light mode ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:     #F4F4F9;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #EAEAF4;
  --bg-overlay:  rgba(124,58,255,.05);
  --bg-card:     #FFFFFF;
  --bg-body:     #F8F8FC;
  --bg-subtle:   rgba(0,0,0,.04);

  --txt-primary:   #0F0F1E;
  --txt-secondary: #3A3A5C;
  --txt-muted:     #8080A4;

  --border:        rgba(0,0,0,.08);
  --border-soft:   rgba(0,0,0,.10);
  --border-medium: rgba(0,0,0,.18);
  --border-accent: rgba(124,58,255,.3);

  --grad-card: linear-gradient(145deg, rgba(124,58,255,.06), rgba(255,60,172,.03));

  --shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.14);
  --shadow-glow: 0 0 60px rgba(124,58,255,.12);
  --shadow-glow-accent: 0 0 40px rgba(255,107,53,.10);
}