:root {
  /* =========================
     🎨 PRIMÄRFARBEN
  ========================= */
  --color-purple-deep: #1A0033;
  --color-purple-neon: #8A2BE2;
  --color-pink-cosmic: #FF4FD8;
  --color-blue-electric: #00D4FF;
  --color-cyan-neon: #7FF9FF;
  --color-navy-space: #0B0F2B;

  /* =========================
     ⚪ NEUTRALFARBEN
  ========================= */
  --color-bg-deep: #080B16;
  --color-bg-dark: #141B2D;
  --color-bg-slate: #1E2740;
  --color-bg-steel: #2D3553;

  --color-gray-light: #A6ADC8;
  --color-white-cosmic: #F2F4FF;

  /* =========================
     📝 TEXT
  ========================= */
   --text-error: #ff0000;
   --text-primary: var(--color-white-cosmic);
   --text-secondary: var(--color-pink-cosmic);
   --text-muted: var(--color-gray-light);

   --text-fs-xs: 0.75em;
   --text-fs-sm: 0.875em;
   --text-fs-md: 1em;
   --text-fs-lg: 1.25em;
   --text-fs-xl: 1.5em;

  /* =========================
     🧱 BACKGROUNDS
  ========================= */
  --bg-primary: var(--color-bg-deep);
  --bg-secondary: var(--color-bg-dark);
  --bg-tertiary: var(--color-bg-slate);

  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-glass-strong: rgba(255, 255, 255, 0.08);

  --bg-disabled: rgba(88, 88, 88, 0.25);

  /* =========================
     🌈 GRADIENTS
  ========================= */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-purple-neon),
    var(--color-pink-cosmic),
    var(--color-blue-electric)
  );

  --gradient-purple-pink: linear-gradient(
    135deg,
    var(--color-purple-neon),
    var(--color-pink-cosmic)
  );

  --gradient-purple-blue: linear-gradient(
    135deg,
    var(--color-purple-neon),
    var(--color-blue-electric)
  );

  --gradient-blue-cyan: linear-gradient(
    135deg,
    var(--color-blue-electric),
    var(--color-cyan-neon)
  );

  /* =========================
     ✨ ACCENT / SPARKLE
  ========================= */
  --accent-purple: #C77DFF;
  --accent-pink: #FF9CF7;
  --accent-blue: #7FDBFF;
  --accent-cyan: #B2FFF9;

  /* =========================
     🟣 BORDERS
  ========================= */
  --border-primary: rgba(138, 43, 226, 0.8);
  --border-hover: rgba(255, 79, 216, 0.9);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-disabled: rgba(102, 102, 102, 0.35);

  /* =========================
     💡 GLOW / SHADOWS
  ========================= */
  --glow-error:
    0 0 10px rgba(226, 43, 43, 0.5),
    0 0 20px rgba(255, 0, 128, 0.3);

  --glow-primary:
    0 0 10px rgba(138, 43, 226, 0.6),
    0 0 20px rgba(255, 79, 216, 0.4),
    0 0 30px rgba(0, 212, 255, 0.3);

  --glow-secondary:
    0 0 10px rgba(138, 43, 226, 0.5),
    0 0 20px rgba(0, 212, 255, 0.3);

  --glow-text:
    0 0 6px rgba(138, 43, 226, 0.6);

  --glow-accent:
    0 0 8px rgba(255, 79, 216, 0.7);

   --glow-deactive:
    0 0 6px rgba(69, 67, 71, 0.6);

   --glow-shadow: 0 0 60px rgba(127, 219, 255, 0.5);

  /* =========================
     🌫️ EFFECTS
  ========================= */
  --blur-glass: blur(6px);

  /* =========================
     📏 BORDER RADIUS
  ========================= */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* =========================
     📐 SPACING
  ========================= */
  --space-4xs: 3px;
  --space-3xs: 4px;
  --space-2xs: 5px;
  --space-xs: 6px;
  --space-sm: 14px;
  --space-md: 18px;
  --space-lg: 22px;
   --space-xl: 44px;
   --space-2xl: 88px;

  /* =========================
     🎬 TRANSITIONS
  ========================= */
  --transition-fast: 0.2s ease;
  --transition-default: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* =========================
     🖱️ INTERACTION
  ========================= */
  --hover-lift: -2px;

  /* =========================
     🖱️ Background
  ========================= */
   --bg-stars: url("https://www.transparenttextures.com/patterns/stardust.png");
   --stars-speed: 240s;
   --stars-move-x: 10000px;
   --stars-move-y: 5000px;
}

  @media (max-width: 768px) {
  :root {
    --space-4xs: 1px;
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 18px;

   --text-fs-xs: 0.5em;
   --text-fs-sm: 0.7em;
   --text-fs-md: 0.8em;
   --text-fs-lg: 0.90em;
   --text-fs-xl: 1.0em;
  }}