/* ============================================
   AESPA THEME
   Cyberpunk neon aesthetic with Electric Violet
   ============================================ */

/* Core Brand Tokens */
html[data-color="aespa"] {
  /* Core Palette */
  --ae-void-black: #06060A;
  --ae-chrome-white: #F5F7FF;
  --ae-electric-violet: #7B5CFF;
  
  /* Secondary Accents */
  --ae-neon-cyan: #00F0FF;
  --ae-synthetic-pink: #FF3D81;
  
  /* Structural Neutrals */
  --ae-carbon-gray: #14141A;
  --ae-graphite-gray: #242430;
  --ae-fog-gray: #9FA3C1;
  
  /* Typography */
  --ae-text-primary: #F5F7FF;
  --ae-text-secondary: #B8BCE6;
  --ae-text-muted: #8A8EB8;
  
  /* Map to system variables */
  --brand-h: 252;
  --brand-s: 100%;
  --brand-l: 68%;
  
  /* Background */
  --bg: var(--ae-void-black);
  --card: var(--ae-carbon-gray);
  --card-alt: var(--ae-graphite-gray);
  --surface: var(--ae-carbon-gray);
  --surface-alt: var(--ae-graphite-gray);
  
  /* Text */
  --text: var(--ae-text-primary);
  --text-secondary: var(--ae-text-secondary);
  --text-muted: var(--ae-text-muted);
  
  /* Borders */
  --border: var(--ae-graphite-gray);
  --border-subtle: rgba(36, 36, 48, 0.6);
  
  /* Brand accent */
  --accent: var(--ae-electric-violet);
  --accent-hover: var(--ae-neon-cyan);
  
  /* Shadows with neon glow */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 18px rgba(123, 92, 255, 0.6);
  --shadow-cyan: 0 0 18px rgba(0, 240, 255, 0.5);
  --shadow-pink: 0 0 18px rgba(255, 61, 129, 0.5);
}

/* ============================================
   BACKGROUND IMAGE
   ============================================ */
html[data-color="aespa"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../backrounds/aespa-backroundwebp.webp') center/cover no-repeat fixed;
  z-index: -2;
  pointer-events: none;
}

html[data-color="aespa"]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(6, 6, 10, 0.85) 0%, rgba(20, 20, 26, 0.8) 50%, rgba(123, 92, 255, 0.2) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ============================================
   LIGHT MODE OVERRIDES (aespa stays dark)
   ============================================ */
html[data-color="aespa"][data-theme="light"] {
  --bg: var(--ae-void-black);
  --card: var(--ae-carbon-gray);
  --card-alt: var(--ae-graphite-gray);
  --surface: var(--ae-carbon-gray);
  --surface-alt: var(--ae-graphite-gray);
  --text: var(--ae-text-primary);
  --text-secondary: var(--ae-text-secondary);
  --text-muted: var(--ae-text-muted);
  --border: var(--ae-graphite-gray);
}

/* ============================================
   DARK MODE (Native state)
   ============================================ */
html[data-color="aespa"][data-theme="dark"] {
  --bg: var(--ae-void-black);
  --card: var(--ae-carbon-gray);
  --card-alt: var(--ae-graphite-gray);
  --surface: var(--ae-carbon-gray);
  --surface-alt: var(--ae-graphite-gray);
  --text: var(--ae-text-primary);
  --text-secondary: var(--ae-text-secondary);
  --text-muted: var(--ae-text-muted);
  --border: var(--ae-graphite-gray);
}

/* ============================================
   COMPONENT STYLING
   ============================================ */

/* Cards with glass blur effect */
html[data-color="aespa"] .card,
html[data-color="aespa"] .block-card,
html[data-color="aespa"] .period-card {
  background: rgba(20, 20, 26, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
  border-radius: 8px !important;
  color: var(--ae-text-primary) !important;
}

html[data-color="aespa"] .card:hover,
html[data-color="aespa"] .block-card:hover {
  border-color: var(--ae-electric-violet) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Active/Current block card */
html[data-color="aespa"] .block-card.current,
html[data-color="aespa"] .period-card.active {
  background: linear-gradient(135deg, rgba(20, 20, 26, 0.9) 0%, rgba(123, 92, 255, 0.2) 100%) !important;
  border-color: var(--ae-electric-violet) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Buttons - Primary (Electric Violet) */
html[data-color="aespa"] .btn-primary,
html[data-color="aespa"] button[type="submit"],
html[data-color="aespa"] .primary-btn {
  background: var(--ae-electric-violet) !important;
  color: var(--ae-void-black) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

html[data-color="aespa"] .btn-primary:hover,
html[data-color="aespa"] button[type="submit"]:hover,
html[data-color="aespa"] .primary-btn:hover {
  background: var(--ae-neon-cyan) !important;
  color: var(--ae-void-black) !important;
  box-shadow: var(--shadow-cyan) !important;
}

/* Buttons - Secondary */
html[data-color="aespa"] .btn-secondary,
html[data-color="aespa"] .quick-action {
  background: transparent !important;
  color: var(--ae-electric-violet) !important;
  border: 1px solid var(--ae-electric-violet) !important;
  border-radius: 6px !important;
}

html[data-color="aespa"] .btn-secondary:hover,
html[data-color="aespa"] .quick-action:hover {
  background: rgba(123, 92, 255, 0.1) !important;
  border-color: var(--ae-neon-cyan) !important;
  color: var(--ae-neon-cyan) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Chips */
html[data-color="aespa"] .chip {
  background: var(--ae-graphite-gray) !important;
  color: var(--ae-text-primary) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
  border-radius: 4px !important;
}

html[data-color="aespa"] .chip:hover {
  border-color: var(--ae-neon-cyan) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}

html[data-color="aespa"] .chip[aria-pressed="true"] {
  background: var(--ae-electric-violet) !important;
  border-color: var(--ae-electric-violet) !important;
  color: var(--ae-void-black) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Links */
html[data-color="aespa"] a {
  color: var(--ae-electric-violet) !important;
}

html[data-color="aespa"] a:hover {
  color: var(--ae-neon-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

/* Inputs */
html[data-color="aespa"] input,
html[data-color="aespa"] select,
html[data-color="aespa"] textarea {
  background: var(--ae-carbon-gray) !important;
  color: var(--ae-text-primary) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
  border-radius: 4px !important;
}

html[data-color="aespa"] input:focus,
html[data-color="aespa"] select:focus,
html[data-color="aespa"] textarea:focus {
  border-color: var(--ae-neon-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.3) !important;
  outline: none !important;
}

/* Dialogs/Modals with glass effect */
html[data-color="aespa"] dialog,
html[data-color="aespa"] .modal {
  background: rgba(20, 20, 26, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
  color: var(--ae-text-primary) !important;
  border-radius: 12px !important;
}

html[data-color="aespa"] dialog::backdrop {
  background: rgba(6, 6, 10, 0.9) !important;
}

/* Progress bars with neon gradient */
html[data-color="aespa"] .progress-bar,
html[data-color="aespa"] progress {
  background: var(--ae-graphite-gray) !important;
  border-radius: 4px !important;
}

html[data-color="aespa"] .progress-fill,
html[data-color="aespa"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--ae-electric-violet) 0%, var(--ae-neon-cyan) 100%) !important;
  box-shadow: 0 0 10px rgba(123, 92, 255, 0.5) !important;
}

/* Scrollbar */
html[data-color="aespa"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-color="aespa"] ::-webkit-scrollbar-track {
  background: var(--ae-void-black);
}

html[data-color="aespa"] ::-webkit-scrollbar-thumb {
  background: var(--ae-graphite-gray);
  border-radius: 4px;
}

html[data-color="aespa"] ::-webkit-scrollbar-thumb:hover {
  background: var(--ae-electric-violet);
  box-shadow: var(--shadow-glow);
}

/* Text styling */
html[data-color="aespa"] h1,
html[data-color="aespa"] h2,
html[data-color="aespa"] h3,
html[data-color="aespa"] .title,
html[data-color="aespa"] .heading {
  color: var(--ae-text-primary) !important;
}

html[data-color="aespa"] .muted,
html[data-color="aespa"] .secondary,
html[data-color="aespa"] .caption {
  color: var(--ae-text-secondary) !important;
}

/* Time display with neon glow */
html[data-color="aespa"] .time-display,
html[data-color="aespa"] .countdown {
  color: var(--ae-text-primary) !important;
  text-shadow: 0 0 20px rgba(123, 92, 255, 0.4);
}

/* Dividers */
html[data-color="aespa"] hr,
html[data-color="aespa"] .divider {
  border-color: var(--ae-graphite-gray) !important;
  background: var(--ae-graphite-gray) !important;
}

/* Tables */
html[data-color="aespa"] table {
  border-color: var(--ae-graphite-gray) !important;
}

html[data-color="aespa"] th {
  background: var(--ae-graphite-gray) !important;
  color: var(--ae-text-primary) !important;
}

html[data-color="aespa"] td {
  background: var(--ae-carbon-gray) !important;
  color: var(--ae-text-primary) !important;
  border-color: var(--ae-graphite-gray) !important;
}

html[data-color="aespa"] tr:hover td {
  background: rgba(123, 92, 255, 0.1) !important;
}

/* Tooltips */
html[data-color="aespa"] .tooltip,
html[data-color="aespa"] [data-tooltip]::after {
  background: var(--ae-carbon-gray) !important;
  color: var(--ae-text-primary) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
}

/* Nav/Header - transparent to show background */
html[data-color="aespa"] nav,
html[data-color="aespa"] header,
html[data-color="aespa"] .header {
  background: transparent !important;
  border-bottom: none !important;
}

/* Footer */
html[data-color="aespa"] footer,
html[data-color="aespa"] .footer {
  background: rgba(6, 6, 10, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--ae-graphite-gray) !important;
  color: var(--ae-text-secondary) !important;
}

/* Onboarding */
html[data-color="aespa"] .onboard-card {
  background: rgba(20, 20, 26, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--ae-graphite-gray) !important;
}

/* Special accent elements */
html[data-color="aespa"] .accent,
html[data-color="aespa"] .highlight {
  color: var(--ae-electric-violet) !important;
}

/* Badge/Tag styling with neon gradient */
html[data-color="aespa"] .badge,
html[data-color="aespa"] .tag {
  background: linear-gradient(90deg, var(--ae-electric-violet) 0%, var(--ae-neon-cyan) 100%) !important;
  color: var(--ae-void-black) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* Neon accent underlines for active states */
html[data-color="aespa"] .active,
html[data-color="aespa"] [aria-current="true"] {
  border-bottom: 2px solid var(--ae-neon-cyan) !important;
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.4) !important;
}

/* Synthetic pink for emphasis/warnings */
html[data-color="aespa"] .warning,
html[data-color="aespa"] .danger {
  color: var(--ae-synthetic-pink) !important;
}

html[data-color="aespa"] .btn.danger,
html[data-color="aespa"] button.danger {
  background: var(--ae-synthetic-pink) !important;
  color: var(--ae-void-black) !important;
  border: none !important;
}

html[data-color="aespa"] .btn.danger:hover,
html[data-color="aespa"] button.danger:hover {
  box-shadow: var(--shadow-pink) !important;
}