/* UNSEINA Linktree - Farbvariablen */
/* Hier können alle Farben zentral geändert werden */

:root {
  /* Hauptfarben */
  --primary-bg: radial-gradient(circle at 50% 20%, #0a0a0f, #000 80%);
  --accent-1: rgba(0, 70, 70, 0.35);
  --accent-2: rgba(0, 255, 255, 0.35);

  /* Textfarben */
  --text-primary: #ffffff;
  --text-secondary: #00ffff;
  --text-accent: #00cccc;

  /* Glow und Schatten */
  --glow-color: #00ffff;
  --shadow-color: rgba(0, 255, 255, 0.3);

  /* Container und Hintergründe */
  --container-bg: rgba(10, 10, 15, 0.95);
  --modal-bg: rgba(10, 10, 15, 0.95);
  --link-bg: rgba(0, 0, 0, 0.6);
  --project-bg: rgba(0, 0, 0, 0.3);

  /* Border-Farben */
  --border-primary: var(--accent-1);
  --border-glow: var(--glow-color);

  /* Social Media spezifische Farben */
  --instagram-color: rgba(225, 48, 108, 0.5);
  --instagram-hover: rgba(225, 48, 108, 0.4);
  --instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

  --youtube-color: rgba(255, 0, 0, 0.5);
  --youtube-hover: rgba(255, 0, 0, 0.4);
  --youtube-bg: #ff0000;

  --discord-color: rgba(114, 137, 218, 0.5);
  --discord-hover: rgba(114, 137, 218, 0.4);
  --discord-bg: #7289da;

  --twitch-color: rgba(145, 70, 255, 0.5);
  --twitch-hover: rgba(145, 70, 255, 0.4);
  --twitch-bg: #9146ff;

  --tiktok-color: rgba(0, 0, 0, 0.5);
  --tiktok-hover: rgba(0, 0, 0, 0.4);
  --tiktok-bg: #000000;

  /* Action Button Farben */
  --email-color: var(--accent-1);
  --email-hover: var(--shadow-color);

  --projects-color: rgba(0, 255, 255, 0.5);
  --projects-hover: rgba(0, 255, 255, 0.4);

  --nln-color: rgba(255, 0, 0, 0.5);
  --nln-hover: rgba(255, 0, 0, 0.4);

  --cdkeys-color: rgba(255, 165, 0, 0.5);
  --cdkeys-hover: rgba(255, 165, 0, 0.4);

  --voltcola-color: rgba(255, 255, 0, 0.5);
  --voltcola-hover: rgba(255, 255, 0, 0.4);

  --impressum-color: rgba(128, 128, 128, 0.5);
  --impressum-hover: rgba(128, 128, 128, 0.4);

  /* Modal Farben */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-border: var(--accent-1);
  --modal-shadow: rgba(0, 255, 255, 0.2);

  /* Button Farben */
  --btn-primary: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --btn-primary-hover: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  --btn-border: var(--glow-color);

  /* Partikel und Effekte */
  --particle-color: rgba(0, 255, 255, 0.3);
  --star-color: #00ffff;
  --star-color-alt: #00cccc;

  /* Hover-Effekte */
  --hover-transform: translateY(-3px);
  --hover-scale: scale(1.1);
  --hover-shadow: 0 10px 30px var(--shadow-color);

  /* Animationen */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.8s ease;
}

/* Alternative Farbschemata - können durch Ändern der :root Klasse aktiviert werden */

/* Warmes Orange/Rot Schema */
:root.warm-theme {
  --primary-bg: radial-gradient(circle at 50% 20%, #1a0a0a, #000 80%);
  --accent-1: rgba(70, 20, 0, 0.35);
  --accent-2: rgba(255, 100, 0, 0.35);
  --text-secondary: #ff6600;
  --text-accent: #ff8844;
  --glow-color: #ff6600;
  --shadow-color: rgba(255, 100, 0, 0.3);
  --star-color: #ff6600;
  --star-color-alt: #ff8844;
  --particle-color: rgba(255, 100, 0, 0.3);
}

/* Kühles Blau/Lila Schema */
:root.cool-theme {
  --primary-bg: radial-gradient(circle at 50% 20%, #0a0a1a, #000 80%);
  --accent-1: rgba(20, 0, 70, 0.35);
  --accent-2: rgba(100, 0, 255, 0.35);
  --text-secondary: #6400ff;
  --text-accent: #8844ff;
  --glow-color: #6400ff;
  --shadow-color: rgba(100, 0, 255, 0.3);
  --star-color: #6400ff;
  --star-color-alt: #8844ff;
  --particle-color: rgba(100, 0, 255, 0.3);
}

/* Grünes Schema */
:root.green-theme {
  --primary-bg: radial-gradient(circle at 50% 20%, #0a1a0a, #000 80%);
  --accent-1: rgba(0, 70, 20, 0.35);
  --accent-2: rgba(0, 255, 100, 0.35);
  --text-secondary: #00ff64;
  --text-accent: #44ff88;
  --glow-color: #00ff64;
  --shadow-color: rgba(0, 255, 100, 0.3);
  --star-color: #00ff64;
  --star-color-alt: #44ff88;
  --particle-color: rgba(0, 255, 100, 0.3);
}

/* Pink/Magenta Schema */
:root.pink-theme {
  --primary-bg: radial-gradient(circle at 50% 20%, #1a0a1a, #000 80%);
  --accent-1: rgba(70, 0, 70, 0.35);
  --accent-2: rgba(255, 0, 255, 0.35);
  --text-secondary: #ff00ff;
  --text-accent: #ff44ff;
  --glow-color: #ff00ff;
  --shadow-color: rgba(255, 0, 255, 0.3);
  --star-color: #ff00ff;
  --star-color-alt: #ff44ff;
  --particle-color: rgba(255, 0, 255, 0.3);
}
