/**
 * Midnight Code Theme
 * 
 * A sleek dark theme for focused coding and creative work
 * Background: Midnight Blue
 * Text: Cool Off-White
 * Primary Accent: Muted Gold
 * Secondary Accent: Cyber Blue
 */

:root {
  /* ===========================
     Background Colors (Midnight Blue)
     =========================== */
  --color-background-midnight: rgb(10, 25, 47);         /* Deep Midnight Blue */
  --color-background-midnight-light: rgb(15, 35, 60);   /* Lighter Midnight */
  --color-background-midnight-dark: rgb(5, 15, 30);     /* Darker Midnight */
  
  --color-background-gradient-start: rgb(5, 15, 30);    /* Dark Midnight */
  --color-background-gradient-mid: rgb(10, 25, 47);     /* Mid Midnight */
  --color-background-gradient-end: rgb(15, 35, 60);     /* Light Midnight */

  /* ===========================
     Surface Colors (Midnight variations)
     =========================== */
  --color-surface-dark: rgb(5, 15, 30);         /* Very dark midnight */
  --color-surface-medium: rgb(15, 35, 60);      /* Medium midnight */
  --color-surface-light: rgb(20, 45, 75);       /* Light midnight */
  --color-surface-lighter: rgb(25, 55, 90);     /* Lighter midnight */
  --color-surface-lightest: rgb(30, 65, 105);   /* Lightest midnight */

  /* ===========================
     Text Colors (Cool Off-White)
     =========================== */
  --color-text-primary: rgb(240, 246, 252);     /* Cool Off-White (slate-50) */
  --color-text-secondary: rgb(226, 232, 240);   /* Slate-200 */
  --color-text-tertiary: rgb(203, 213, 225);    /* Slate-300 */
  --color-text-muted: rgb(148, 163, 184);       /* Slate-400 */
  --color-text-disabled: rgb(100, 116, 139);    /* Slate-500 */
  --color-text-white: rgb(255, 255, 255);       /* Pure white */
  --color-text-black: rgb(15, 23, 42);          /* Dark slate for light backgrounds */

  /* ===========================
     Primary Colors (Muted Gold)
     =========================== */
  --color-primary: rgb(218, 165, 32);           /* Muted Gold (goldenrod) */
  --color-primary-light: rgb(238, 190, 80);     /* Lighter Gold */
  --color-primary-dark: rgb(184, 134, 11);      /* Darker Gold */
  --color-primary-50: rgb(254, 252, 232);       /* Very light gold */
  --color-primary-100: rgb(254, 249, 195);      /* Light gold */
  --color-primary-200: rgb(254, 240, 138);      /* Medium-light gold */
  --color-primary-300: rgb(253, 224, 71);       /* Medium gold */
  --color-primary-600: rgb(202, 138, 4);        /* Deep gold */
  --color-primary-800: rgb(161, 98, 7);         /* Very deep gold */
  --color-primary-900: rgb(113, 63, 18);        /* Darkest gold */

  /* ===========================
     Secondary Colors (Cyber Blue)
     =========================== */
  --color-secondary: rgb(0, 191, 255);          /* Cyber Blue (deep sky blue) */
  --color-secondary-light: rgb(56, 189, 248);   /* Lighter Cyber Blue */
  --color-secondary-dark: rgb(2, 132, 199);     /* Darker Cyber Blue */
  --color-secondary-100: rgb(224, 242, 254);    /* Very light cyber */
  --color-secondary-200: rgb(186, 230, 253);    /* Light cyber */
  --color-secondary-300: rgb(125, 211, 252);    /* Medium cyber */
  --color-secondary-600: rgb(2, 132, 199);      /* Deep cyber */
  --color-secondary-800: rgb(7, 89, 133);       /* Very deep cyber */

  /* ===========================
     Accent Colors
     =========================== */
  --color-accent: rgb(168, 85, 247);            /* Purple accent for variety */
  --color-accent-light: rgb(192, 132, 252);     /* Lighter purple */
  --color-accent-dark: rgb(147, 51, 234);       /* Darker purple */

  /* ===========================
     State Colors
     =========================== */
  --color-success: rgb(34, 197, 94);            /* Green */
  --color-success-light: rgb(74, 222, 128);     /* Light Green */
  --color-success-300: rgb(134, 239, 172);      /* Lighter Green */
  
  --color-error: rgb(239, 68, 68);              /* Red */
  --color-error-light: rgb(248, 113, 113);      /* Light Red */
  --color-error-100: rgb(254, 226, 226);        /* Very light red */
  --color-error-300: rgb(252, 165, 165);        /* Medium red */

  --color-warning: rgb(234, 179, 8);            /* Yellow warning */
  --color-warning-light: rgb(250, 204, 21);     /* Light Yellow */

  --color-info: rgb(0, 191, 255);               /* Cyber Blue for info */
  --color-info-light: rgb(56, 189, 248);        /* Light Cyber */

  /* ===========================
     Border Colors
     =========================== */
  --color-border-base: rgb(30, 65, 105);        /* Light midnight */
  --color-border-light: rgba(148, 163, 184, 0.2);  /* Slate with opacity */
  --color-border-medium: rgba(148, 163, 184, 0.3); /* Slate with opacity */
  --color-border-dark: rgb(71, 85, 105);        /* Slate-600 */

  /* ===========================
     Overlay/Backdrop Colors
     =========================== */
  --color-overlay-light: rgba(5, 15, 30, 0.3);
  --color-overlay-medium: rgba(5, 15, 30, 0.6);
  --color-overlay-heavy: rgba(5, 15, 30, 0.9);
  --color-backdrop-light: rgba(240, 246, 252, 0.05);
  --color-backdrop-medium: rgba(240, 246, 252, 0.1);
  --color-backdrop-heavy: rgba(240, 246, 252, 0.95);

  /* ===========================
     Component-Specific Colors
     =========================== */
  /* Buttons */
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-hover: var(--color-primary-light);
  --color-button-primary-text: rgb(10, 25, 47);
  
  --color-button-secondary-bg: var(--color-secondary);
  --color-button-secondary-hover: var(--color-secondary-light);
  --color-button-secondary-text: rgb(10, 25, 47);
  
  --color-button-tertiary-bg: var(--color-surface-lighter);
  --color-button-tertiary-hover: var(--color-surface-lightest);
  --color-button-tertiary-text: var(--color-text-primary);
  
  --color-button-success-bg: var(--color-success);
  --color-button-success-hover: var(--color-success-light);
  
  --color-button-error-bg: var(--color-error);
  --color-button-error-hover: var(--color-error-light);
  
  --color-button-disabled-bg: var(--color-surface-medium);
  --color-button-disabled-hover: var(--color-surface-light);

  /* Cards & Containers */
  --color-card-background: var(--color-surface-medium);
  --color-card-background-alt: var(--color-surface-light);
  --color-card-border: var(--color-border-light);

  /* Navigation */
  --color-nav-background: rgba(10, 25, 47, 0.95);
  --color-nav-hover: rgba(0, 191, 255, 0.1);    /* Cyber blue tint */
  --color-nav-text: var(--color-text-primary);
  --color-nav-text-hover: var(--color-secondary);
  --color-nav-accent: var(--color-primary);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-primary-br: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
  --gradient-background: linear-gradient(to bottom right, 
    var(--color-background-gradient-start), 
    var(--color-background-gradient-mid), 
    var(--color-background-gradient-end));
  --gradient-overlay-primary: linear-gradient(to right, 
    rgba(218, 165, 32, 0.15), 
    rgba(0, 191, 255, 0.15));
  --gradient-overlay-secondary: linear-gradient(to bottom right, 
    rgba(218, 165, 32, 0.2), 
    rgba(0, 191, 255, 0.2));
  --gradient-accent: linear-gradient(135deg, 
    var(--color-primary), 
    var(--color-secondary), 
    var(--color-accent));
  --gradient-midnight: linear-gradient(135deg,
    var(--color-secondary) 0%,
    var(--color-primary) 100%);
}

/* ===========================
   Applied Theme Styles
   =========================== */

/* Backgrounds */
.bg-purple-600 {
  background-color: var(--color-primary) !important;
}

.bg-blue-600 {
  background-color: var(--color-secondary) !important;
}

.bg-slate-800 {
  background-color: var(--color-surface-dark) !important;
}

.bg-slate-700 {
  background-color: var(--color-surface-medium) !important;
}

.bg-gray-600 {
  background-color: var(--color-surface-light) !important;
}

.bg-green-600 {
  background-color: var(--color-success) !important;
}

.bg-red-600 {
  background-color: var(--color-error) !important;
}

/* Background with opacity */
.bg-slate-800\/80 {
  background-color: var(--color-nav-background) !important;
}

.bg-black\/80 {
  background-color: var(--color-overlay-heavy) !important;
}

.bg-black\/60 {
  background-color: rgba(5, 15, 30, 0.6) !important;
}

.bg-black\/50 {
  background-color: var(--color-overlay-medium) !important;
}

.bg-black\/30 {
  background-color: var(--color-overlay-light) !important;
}

.bg-black\/20 {
  background-color: rgba(5, 15, 30, 0.2) !important;
}

.bg-black\/10 {
  background-color: rgba(5, 15, 30, 0.1) !important;
}

.bg-white\/80 {
  background-color: var(--color-backdrop-heavy) !important;
}

.bg-white\/10 {
  background-color: var(--color-backdrop-medium) !important;
}

.bg-white\/5 {
  background-color: var(--color-backdrop-light) !important;
}

.bg-slate-900\/50 {
  background-color: rgba(5, 15, 30, 0.5) !important;
}

.bg-purple-600\/30 {
  background-color: rgba(218, 165, 32, 0.3) !important;
}

.bg-blue-600\/30 {
  background-color: rgba(0, 191, 255, 0.3) !important;
}

.bg-green-500\/20 {
  background-color: rgba(34, 197, 94, 0.2) !important;
}

.bg-red-500\/20 {
  background-color: rgba(239, 68, 68, 0.2) !important;
}

/* Gradients */
.bg-gradient-to-br.from-slate-900.via-purple-900.to-slate-900 {
  background-image: var(--gradient-background) !important;
}

.bg-gradient-to-r.from-purple-600.to-blue-600 {
  background-image: var(--gradient-primary) !important;
}

.bg-gradient-to-r.from-purple-600\/20.to-blue-600\/20 {
  background-image: var(--gradient-overlay-primary) !important;
}

.from-purple-600\/20 {
  --tw-gradient-from: rgba(218, 165, 32, 0.2) var(--tw-gradient-from-position);
}

.to-blue-600\/20 {
  --tw-gradient-to: rgba(0, 191, 255, 0.2) var(--tw-gradient-to-position);
}

/* Text Colors */
.text-white {
  color: var(--color-text-primary) !important;
}

.text-gray-200 {
  color: var(--color-text-secondary) !important;
}

.text-gray-300 {
  color: var(--color-text-tertiary) !important;
}

.text-gray-400 {
  color: var(--color-text-muted) !important;
}

.text-gray-500 {
  color: var(--color-text-disabled) !important;
}

.text-black {
  color: var(--color-text-black) !important;
}

.text-purple-200 {
  color: var(--color-primary-200) !important;
}

.text-purple-300 {
  color: var(--color-primary-300) !important;
}

.text-blue-200 {
  color: var(--color-secondary-200) !important;
}

.text-blue-300 {
  color: var(--color-secondary-300) !important;
}

.text-green-300 {
  color: var(--color-success-300) !important;
}

.text-red-300 {
  color: var(--color-error-300) !important;
}

/* Hover Text Colors */
.hover\:text-white:hover {
  color: var(--color-text-primary) !important;
}

.hover\:text-purple-100:hover {
  color: var(--color-primary-100) !important;
}

.hover\:text-purple-300:hover {
  color: var(--color-primary-300) !important;
}

.hover\:text-blue-100:hover {
  color: var(--color-secondary-100) !important;
}

.hover\:text-red-100:hover {
  color: var(--color-error-100) !important;
}

/* Border Colors */
.border-white\/10 {
  border-color: var(--color-border-light) !important;
}

.border-white\/20 {
  border-color: var(--color-border-medium) !important;
}

.border-gray-600 {
  border-color: var(--color-border-base) !important;
}

.border-purple-500 {
  border-color: var(--color-primary) !important;
}

/* Hover Background Colors */
.hover\:bg-white\/20:hover {
  background-color: var(--color-nav-hover) !important;
}

.hover\:bg-purple-700\/50:hover {
  background-color: rgba(184, 134, 11, 0.5) !important;
}

.hover\:bg-blue-500:hover {
  background-color: var(--color-secondary-light) !important;
}

.hover\:bg-red-500:hover {
  background-color: var(--color-error-light) !important;
}

.hover\:bg-gray-700:hover {
  background-color: var(--color-button-disabled-hover) !important;
}

/* Focus Ring Colors */
.focus\:ring-purple-500:focus {
  --tw-ring-color: var(--color-primary);
}

/* ===========================
   Midnight Code Special Effects
   =========================== */

/* Deep midnight background */
body[data-theme="midnight"] {
  background: linear-gradient(to bottom right,
    rgb(5, 15, 30),
    rgb(10, 25, 47),
    rgb(15, 35, 60));
  position: relative;
  color: var(--color-text-primary);
}

/* Subtle stars/glow effect */
body[data-theme="midnight"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(0, 191, 255, 0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(218, 165, 32, 0.3), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(0, 191, 255, 0.2), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(218, 165, 32, 0.2), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(0, 191, 255, 0.2), transparent);
  background-size: 200% 200%;
  pointer-events: none;
  z-index: 0;
  animation: starGlow 20s ease-in-out infinite;
}

@keyframes starGlow {
  0%, 100% {
    opacity: 0.3;
    background-position: 0% 0%;
  }
  50% {
    opacity: 0.6;
    background-position: 100% 100%;
  }
}

/* Gold primary buttons with glow */
body[data-theme="midnight"] .btn-primary,
body[data-theme="midnight"] button.primary {
  background: var(--color-primary);
  color: rgb(10, 25, 47);
  border: none;
  box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
  font-weight: 600;
}

body[data-theme="midnight"] .btn-primary:hover,
body[data-theme="midnight"] button.primary:hover {
  background: var(--color-primary-light);
  box-shadow: 0 0 30px rgba(218, 165, 32, 0.5);
  transform: translateY(-2px);
}

/* Cyber blue secondary buttons */
body[data-theme="midnight"] .btn-secondary,
body[data-theme="midnight"] button.secondary {
  background: var(--color-secondary);
  color: rgb(10, 25, 47);
  border: none;
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
  font-weight: 600;
}

body[data-theme="midnight"] .btn-secondary:hover,
body[data-theme="midnight"] button.secondary:hover {
  background: var(--color-secondary-light);
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.5);
  transform: translateY(-2px);
}

/* Cyber-gold gradient for headings */
body[data-theme="midnight"] h1 {
  background: var(--gradient-midnight);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(0, 191, 255, 0.2);
}

/* Gold selection highlight */
body[data-theme="midnight"] ::selection {
  background-color: var(--color-primary);
  color: rgb(10, 25, 47);
}

/* Cyber blue focus rings with glow */
body[data-theme="midnight"] *:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

/* Cards with cyber glow on hover */
body[data-theme="midnight"] .card {
  background: rgba(15, 35, 60, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body[data-theme="midnight"] .card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 8px 32px rgba(0, 191, 255, 0.2),
              0 0 20px rgba(0, 191, 255, 0.1);
  transform: translateY(-4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation with cyber accent */
body[data-theme="midnight"] .nav-item {
  color: var(--color-text-primary);
  position: relative;
}

body[data-theme="midnight"] .nav-item:hover {
  color: var(--color-secondary);
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

body[data-theme="midnight"] .nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

/* Links: Cyber blue with gold hover */
body[data-theme="midnight"] a {
  color: var(--color-secondary);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

body[data-theme="midnight"] a:hover {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

body[data-theme="midnight"] a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

body[data-theme="midnight"] a:hover::after {
  width: 100%;
}

/* Glowing badges */
body[data-theme="midnight"] .badge.cyber {
  background: rgba(0, 191, 255, 0.15);
  color: var(--color-secondary-300);
  border: 1px solid var(--color-secondary);
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

body[data-theme="midnight"] .badge.gold {
  background: rgba(218, 165, 32, 0.15);
  color: var(--color-primary-300);
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 10px rgba(218, 165, 32, 0.2);
}

/* Neon dividers */
body[data-theme="midnight"] hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    var(--color-secondary) 30%,
    var(--color-primary) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

/* Input fields with cyber border */
body[data-theme="midnight"] input,
body[data-theme="midnight"] textarea,
body[data-theme="midnight"] select {
  background: rgba(15, 35, 60, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--color-text-primary);
}

body[data-theme="midnight"] input:focus,
body[data-theme="midnight"] textarea:focus,
body[data-theme="midnight"] select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15),
              0 0 15px rgba(0, 191, 255, 0.2);
  outline: none;
}

/* Code blocks with cyber aesthetics */
body[data-theme="midnight"] code,
body[data-theme="midnight"] pre {
  background: rgba(5, 15, 30, 0.8);
  border: 1px solid rgba(0, 191, 255, 0.2);
  color: var(--color-secondary-300);
}

/* Scrollbar styling */
body[data-theme="midnight"] ::-webkit-scrollbar {
  width: 12px;
}

body[data-theme="midnight"] ::-webkit-scrollbar-track {
  background: rgba(5, 15, 30, 0.5);
}

body[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-secondary), var(--color-primary));
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

body[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
}