/* 
 * themes.css
 * Experimental color themes and artistic accents
 * Designed to be bold, experimental, and personal
 */

/* ---------- THEME SYSTEM ---------- */
/* Base theme is defined in globals.css */
/* These are alternative themes that can be toggled */

/* Theme toggle mechanism */
body[data-theme="default"] {
  /* Default theme is already defined in :root */
  color-scheme: dark;
}

/* ---------- COSMIC THEME ---------- */
body[data-theme="cosmic"] {
  /* Primary palette - Cosmic theme */
  --color-accent-1: #FF00E5; /* Neon pink */
  --color-accent-2: #7000FF; /* Deep violet */
  --color-accent-3: #00FFFF; /* Cyan */
  --color-accent-4: #FFCC00; /* Gold */
  
  /* Background colors */
  --color-bg-primary: #0A001F; /* Deep space purple */
  --color-bg-secondary: #13002A; /* Dark purple */
  --color-bg-tertiary: #1D0035; /* Medium purple */
  --color-bg-card: #1A002F; /* Slightly lighter purple */
  
  /* Text colors */
  --color-text-primary: #F2F2FF; /* Soft white with purple tint */
  --color-text-secondary: #AAA8D8; /* Muted lavender */
  --color-text-tertiary: #6C6CA0; /* Deep muted purple */
  
  /* Gradient maps */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-1));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --gradient-tertiary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-4));
  
  /* Experimental accents */
  --color-glow-1: rgba(255, 0, 229, 0.5); /* Pink glow */
  --color-glow-2: rgba(112, 0, 255, 0.5); /* Violet glow */
  --color-glow-3: rgba(0, 255, 255, 0.5); /* Cyan glow */
}

/* ---------- CYBERPUNK THEME ---------- */
body[data-theme="cyberpunk"] {
  /* Primary palette - Cyberpunk theme */
  --color-accent-1: #FF2A6D; /* Hot pink */
  --color-accent-2: #05D9E8; /* Neon blue */
  --color-accent-3: #01FFC3; /* Neon green */
  --color-accent-4: #FFD300; /* Bright yellow */
  
  /* Background colors */
  --color-bg-primary: #0D0221; /* Deep blue-black */
  --color-bg-secondary: #1A1A2E; /* Dark blue */
  --color-bg-tertiary: #16213E; /* Navy blue */
  --color-bg-card: #1F2833; /* Steel blue */
  
  /* Text colors */
  --color-text-primary: #F0F0F0; /* Off-white */
  --color-text-secondary: #C5C6C7; /* Light gray */
  --color-text-tertiary: #7A7A7A; /* Medium gray */
  
  /* Gradient maps */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-1));
  --gradient-tertiary: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-4));
  
  /* Experimental accents */
  --color-glow-1: rgba(255, 42, 109, 0.5); /* Pink glow */
  --color-glow-2: rgba(5, 217, 232, 0.5); /* Blue glow */
  --color-glow-3: rgba(1, 255, 195, 0.5); /* Green glow */
}

/* ---------- BRUTALIST THEME ---------- */
body[data-theme="brutalist"] {
  /* Primary palette - Brutalist theme */
  --color-accent-1: #FF3C00; /* Bright orange */
  --color-accent-2: #000000; /* Pure black */
  --color-accent-3: #FFFFFF; /* Pure white */
  --color-accent-4: #FFCC00; /* Yellow */
  
  /* Background colors */
  --color-bg-primary: #1A1A1A; /* Dark gray */
  --color-bg-secondary: #2A2A2A; /* Medium gray */
  --color-bg-tertiary: #3A3A3A; /* Light gray */
  --color-bg-card: #2D2D2D; /* Card gray */
  
  /* Text colors */
  --color-text-primary: #FFFFFF; /* Pure white */
  --color-text-secondary: #CCCCCC; /* Light gray */
  --color-text-tertiary: #999999; /* Medium gray */
  
  /* Gradient maps */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-4));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-1));
  --gradient-tertiary: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  
  /* Experimental accents */
  --color-glow-1: rgba(255, 60, 0, 0.5); /* Orange glow */
  --color-glow-2: rgba(0, 0, 0, 0.5); /* Black glow */
  --color-glow-3: rgba(255, 204, 0, 0.5); /* Yellow glow */
}

/* ---------- SYNTHWAVE THEME ---------- */
body[data-theme="synthwave"] {
  /* Primary palette - Synthwave theme */
  --color-accent-1: #FD3777; /* Hot pink */
  --color-accent-2: #836FFF; /* Slate blue */
  --color-accent-3: #41EAD4; /* Turquoise */
  --color-accent-4: #FBAE3C; /* Peach */
  
  /* Background colors */
  --color-bg-primary: #200B3C; /* Deep purple */
  --color-bg-secondary: #2D1B4E; /* Medium purple */
  --color-bg-tertiary: #3B2667; /* Light purple */
  --color-bg-card: #331D5C; /* Card purple */
  
  /* Text colors */
  --color-text-primary: #FFFFFF; /* Pure white */
  --color-text-secondary: #DEAAFF; /* Light lavender */
  --color-text-tertiary: #9F86C0; /* Medium lavender */
  
  /* Gradient maps */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-1));
  --gradient-tertiary: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-4));
  
  /* Experimental accents */
  --color-glow-1: rgba(253, 55, 119, 0.5); /* Pink glow */
  --color-glow-2: rgba(131, 111, 255, 0.5); /* Blue glow */
  --color-glow-3: rgba(65, 234, 212, 0.5); /* Turquoise glow */
}

/* ---------- EXPERIMENTAL THEME ---------- */
body[data-theme="experimental"] {
  /* Primary palette - Experimental theme */
  --color-accent-1: #FF6D00; /* Bright orange */
  --color-accent-2: #9C27B0; /* Purple */
  --color-accent-3: #00BFA5; /* Teal */
  --color-accent-4: #FFAB00; /* Amber */
  
  /* Background colors - Unusual dark theme */
  --color-bg-primary: #121212; /* Almost black */
  --color-bg-secondary: #1E1E1E; /* Very dark gray */
  --color-bg-tertiary: #2C2C2C; /* Dark gray */
  --color-bg-card: #252525; /* Card gray */
  
  /* Text colors */
  --color-text-primary: #E0E0E0; /* Light gray */
  --color-text-secondary: #BDBDBD; /* Medium gray */
  --color-text-tertiary: #757575; /* Dark gray */
  
  /* Gradient maps - More experimental gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  --gradient-tertiary: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-3));
  
  /* Experimental accents */
  --color-glow-1: rgba(255, 109, 0, 0.5); /* Orange glow */
  --color-glow-2: rgba(156, 39, 176, 0.5); /* Purple glow */
  --color-glow-3: rgba(0, 191, 165, 0.5); /* Teal glow */
}

/* ---------- THEME TRANSITIONS ---------- */
/* Smooth transition between themes */
body {
  transition: background-color 0.5s ease,
              color 0.5s ease;
}

/* Elements that should transition smoothly */
a, button, .btn, .nav-links a, .logo-text,
.section-line, .skill-tag, .project-card,
.social-link, .input-border, .contact-link {
  transition: all 0.5s ease;
}

/* ---------- THEME SPECIFIC STYLES ---------- */
/* Cosmic theme specific styles */
body[data-theme="cosmic"] .hero-section {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Cyberpunk theme specific styles */
body[data-theme="cyberpunk"] .btn {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  border: 1px solid var(--color-accent-2);
  box-shadow: 0 0 10px var(--color-glow-2);
}

body[data-theme="cyberpunk"] .section-line {
  height: 0.5rem;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  box-shadow: 0 0 10px var(--color-glow-1);
}

/* Brutalist theme specific styles */
body[data-theme="brutalist"] {
  font-family: monospace;
}

body[data-theme="brutalist"] .btn,
body[data-theme="brutalist"] .skill-tag,
body[data-theme="brutalist"] .project-card {
  border-radius: 0;
  clip-path: none;
}

body[data-theme="brutalist"] .section-line {
  height: 0.5rem;
  width: 10rem;
  clip-path: none;
}

/* Synthwave theme specific styles */
body[data-theme="synthwave"] .hero-section {
  background-image: linear-gradient(0deg, var(--color-bg-primary) 0%, transparent 75%), 
                    linear-gradient(180deg, var(--color-bg-primary) 0%, transparent 75%),
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23200B3C'/%3E%3Cstop offset='1' stop-color='%233B2667'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23200B3C' cx='12' cy='12' r='12'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");
}

body[data-theme="synthwave"] .section-title {
  text-shadow: 0 0 10px var(--color-glow-1), 0 0 20px var(--color-glow-1);
}

/* Experimental theme specific styles */
body[data-theme="experimental"] .btn {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

body[data-theme="experimental"] .section-line {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}

/* ---------- COLOR PALETTE TOGGLE ---------- */
.palette-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1001;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.palette-toggle:hover {
  border-color: var(--color-accent-1);
  color: var(--color-accent-1);
  transform: scale(1.1);
}

.palette-toggle.active {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: var(--color-bg-primary);
}

/* ---------- COLOR PALETTE PANEL ---------- */
.palette-panel {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  z-index: 1000;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 18rem;
}

.palette-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.palette-title {
  display: block;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

.palette-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.palette-option:hover {
  background: rgba(255, 255, 255, 0.04);
}

.theme-label {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.palette-option:hover .theme-label {
  color: var(--color-text-primary);
}

.theme-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  flex-shrink: 0;
}

.theme-btn.active {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 12px rgba(var(--color-accent-1-rgb), 0.4);
  transform: scale(1.15);
}

.theme-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 1;
}


.theme-btn:hover {
  transform: scale(1.05);
  border-color: var(--color-accent-1);
}

.theme-btn:hover::before {
  width: 100%;
  height: 100%;
}

.theme-btn.active {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 20px rgba(var(--color-accent-1-rgb), 0.4);
  transform: scale(1.1);
}

.theme-default {
  background: linear-gradient(135deg, #0A0A0F, #FF3D00);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.theme-cosmic {
  background: linear-gradient(135deg, #0A001F, #FF00E5);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.theme-cyberpunk {
  background: linear-gradient(135deg, #0D0221, #05D9E8);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.theme-brutalist {
  background: linear-gradient(135deg, #1A1A1A, #FF3C00);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.theme-synthwave {
  background: linear-gradient(135deg, #200B3C, #FD3777);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.theme-experimental {
  background: linear-gradient(135deg, #121212, #FF6D00);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}