/* ============================================
   NUKOE — Theme Override v2 — "Deep Cosmos"
   Sapphire × Nebula × Obsidian
   ============================================ */

/* ═══════════════════════════════════════════
   DARK MODE — "Obsidian Space"
═══════════════════════════════════════════ */
:root {
  /* Fond : noir profond légèrement violet — comme l'espace */
  --background: 228 45% 4%;

  /* Texte : blanc cassé légèrement bleuté, plus doux que pur blanc */
  --foreground: 214 32% 94%;

  /* Cards : couche distincte avec profondeur */
  --card: 226 38% 7%;
  --card-foreground: 214 32% 94%;
  --popover: 226 38% 7%;
  --popover-foreground: 214 32% 94%;

  /* Primaire : saphir électrique — confiant, premium */
  --primary: 215 95% 60%;
  --primary-foreground: 228 45% 4%;

  /* Secondaire : surfaces légèrement relevées */
  --secondary: 226 30% 11%;
  --secondary-foreground: 214 25% 80%;

  /* Muted : meilleure lisibilité */
  --muted: 226 25% 14%;
  --muted-foreground: 218 18% 58%;

  /* Accent : nébuleuse magenta-violet */
  --accent: 280 90% 66%;
  --accent-foreground: 228 45% 4%;

  /* Bordures et inputs */
  --border: 226 22% 16%;
  --input: 226 28% 11%;
  --ring: 215 95% 60%;

  /* Destructive */
  --destructive: 4 80% 55%;
  --destructive-foreground: 214 32% 94%;

  /* ── Palette néon repensée ── */
  --neon-blue:   215 95% 60%;   /* saphir électrique */
  --neon-cyan:   188 85% 52%;   /* teal lumineux */
  --neon-purple: 280 90% 66%;   /* nébuleuse violette */
  --neon-green:  158 78% 48%;   /* émeraude */
  --neon-pink:   338 82% 62%;   /* rose cosmique */

  /* ── Gradients profonds et veloutés ── */
  --gradient-primary:
    linear-gradient(135deg,
      hsl(215 95% 60%) 0%,
      hsl(250 88% 62%) 50%,
      hsl(280 90% 66%) 100%);

  --gradient-secondary:
    linear-gradient(135deg,
      hsl(188 85% 52%) 0%,
      hsl(158 78% 48%) 100%);

  --gradient-accent:
    linear-gradient(135deg,
      hsl(338 82% 62%) 0%,
      hsl(280 90% 66%) 50%,
      hsl(215 95% 60%) 100%);

  --gradient-dark:
    linear-gradient(160deg,
      hsl(228 50% 6%) 0%,
      hsl(228 45% 4%) 100%);

  /* ── Glass effect : verre fumé premium ── */
  --glass-bg:     hsla(226, 42%, 8%, 0.65);
  --glass-border: hsla(215, 90%, 65%, 0.12);
  --glass-shadow: 0 8px 40px hsla(215, 95%, 60%, 0.08);

  /* ── Ombres lumineuses raffinées ── */
  --shadow-neon:    0 0 20px hsl(215 95% 60% / 0.30),
                    0 0 60px hsl(215 95% 60% / 0.10);
  --shadow-glow:    0 0 30px hsl(188 85% 52% / 0.20),
                    0 0 80px hsl(188 85% 52% / 0.06);
  --shadow-intense: 0 0 40px hsl(280 90% 66% / 0.25),
                    0 0 100px hsl(280 90% 66% / 0.08);
}

/* ── Fond du body : nébuleuse multi-couches ── */
body {
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 90%,
      hsl(215 95% 60% / 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 88% 12%,
      hsl(280 90% 66% / 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%,
      hsl(188 85% 52% / 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 70% 80%,
      hsl(338 82% 62% / 0.05) 0%, transparent 50%);
}

/* ── Glass cards : profondeur et brillance ── */
.glass-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 hsla(215, 90%, 80%, 0.06) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
}

.glass-card:hover {
  border-color: hsl(215 95% 60% / 0.22) !important;
  box-shadow:
    0 12px 48px hsl(215 95% 60% / 0.12),
    inset 0 1px 0 hsla(215, 90%, 80%, 0.09) !important;
}

/* ── Texte gradient sur les titres : 3 couleurs ── */
.text-gradient {
  background: linear-gradient(
    135deg,
    hsl(214 32% 94%) 0%,
    hsl(215 95% 72%) 40%,
    hsl(280 90% 72%) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Boutons futuristes : gradient riche ── */
.btn-futuristic {
  background: linear-gradient(
    135deg,
    hsl(215 95% 60%) 0%,
    hsl(250 88% 62%) 50%,
    hsl(280 90% 66%) 100%
  ) !important;
  box-shadow:
    0 4px 20px hsl(215 95% 60% / 0.30),
    0 0 0 1px hsl(215 95% 60% / 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-futuristic:hover {
  box-shadow:
    0 8px 32px hsl(215 95% 60% / 0.45),
    0 0 0 1px hsl(215 95% 60% / 0.25) !important;
  transform: translateY(-1px) !important;
}

/* ── Animation neon-pulse : plus élégante ── */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px hsl(215 95% 60% / 0.40),
      0 0 30px hsl(215 95% 60% / 0.15);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 25px hsl(280 90% 66% / 0.55),
      0 0 50px hsl(280 90% 66% / 0.20);
    transform: scale(1.02);
  }
}

/* ── Scrollbar assortie ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: hsl(228 45% 4%); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    hsl(215 95% 60% / 0.5),
    hsl(280 90% 66% / 0.5)
  );
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    hsl(215 95% 60% / 0.8),
    hsl(280 90% 66% / 0.8)
  );
}

/* ── Sélection de texte ── */
::selection {
  background: hsl(215 95% 60% / 0.25);
  color: hsl(214 32% 96%);
}


/* ═══════════════════════════════════════════
   LIGHT MODE — "Polar Cloud"
   Blanc arctique × Saphir × Améthyste
═══════════════════════════════════════════ */
.light {
  --background: 216 38% 97%;
  --foreground: 228 35% 12%;

  --card: 0 0% 100%;
  --card-foreground: 228 35% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 228 35% 12%;

  /* Saphir profond en mode clair */
  --primary: 215 90% 48%;
  --primary-foreground: 0 0% 100%;

  --secondary: 216 28% 92%;
  --secondary-foreground: 228 30% 15%;

  --muted: 216 25% 91%;
  --muted-foreground: 218 18% 40%;

  /* Améthyste pour l'accent light */
  --accent: 275 80% 55%;
  --accent-foreground: 0 0% 100%;

  --border: 216 22% 85%;
  --input: 216 25% 90%;
  --ring: 215 90% 48%;

  --destructive: 4 75% 50%;
  --destructive-foreground: 0 0% 100%;

  --neon-blue:   215 90% 48%;
  --neon-cyan:   188 78% 40%;
  --neon-purple: 275 80% 55%;
  --neon-green:  158 68% 40%;
  --neon-pink:   338 72% 52%;

  --gradient-primary:
    linear-gradient(135deg,
      hsl(215 90% 48%) 0%,
      hsl(250 82% 52%) 50%,
      hsl(275 80% 55%) 100%);

  --gradient-secondary:
    linear-gradient(135deg,
      hsl(188 78% 40%) 0%,
      hsl(158 68% 40%) 100%);

  --gradient-accent:
    linear-gradient(135deg,
      hsl(338 72% 52%) 0%,
      hsl(275 80% 55%) 50%,
      hsl(215 90% 48%) 100%);

  --gradient-dark:
    linear-gradient(160deg,
      hsl(216 38% 95%) 0%,
      hsl(216 38% 97%) 100%);

  --glass-bg:     hsla(0, 0%, 100%, 0.82);
  --glass-border: hsla(215, 90%, 48%, 0.12);
  --glass-shadow: 0 8px 40px hsla(215, 90%, 48%, 0.08);

  --shadow-neon:    0 0 18px hsl(215 90% 48% / 0.22);
  --shadow-glow:    0 0 28px hsl(188 78% 40% / 0.16);
  --shadow-intense: 0 0 38px hsl(275 80% 55% / 0.20);
}

.light body {
  background-image:
    radial-gradient(ellipse 70% 50% at 8% 88%,
      hsl(215 90% 48% / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 10%,
      hsl(275 80% 55% / 0.06) 0%, transparent 55%),
    linear-gradient(160deg,
      hsl(216 38% 97%) 0%,
      hsl(215 30% 94%) 100%);
}

.light .glass-card {
  background: hsla(0, 0%, 100%, 0.82) !important;
  border: 1px solid hsl(215 90% 48% / 0.12) !important;
  box-shadow:
    0 4px 24px hsl(215 90% 48% / 0.07),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
}

.light .glass-card:hover {
  border-color: hsl(215 90% 48% / 0.22) !important;
  box-shadow:
    0 8px 36px hsl(215 90% 48% / 0.12),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.light .text-gradient {
  background: linear-gradient(
    135deg,
    hsl(228 35% 12%) 0%,
    hsl(215 90% 48%) 45%,
    hsl(275 80% 55%) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.light .btn-futuristic {
  background: linear-gradient(
    135deg,
    hsl(215 90% 48%) 0%,
    hsl(250 82% 52%) 50%,
    hsl(275 80% 55%) 100%
  ) !important;
  box-shadow:
    0 4px 18px hsl(215 90% 48% / 0.25),
    0 0 0 1px hsl(215 90% 48% / 0.12) !important;
}

.light .btn-futuristic:hover {
  box-shadow:
    0 8px 28px hsl(215 90% 48% / 0.38),
    0 0 0 1px hsl(215 90% 48% / 0.20) !important;
  transform: translateY(-1px) !important;
}

.light::-webkit-scrollbar-track { background: hsl(216 38% 95%); }
.light::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    hsl(215 90% 48% / 0.45),
    hsl(275 80% 55% / 0.45)
  );
}

.light ::selection {
  background: hsl(215 90% 48% / 0.18);
  color: hsl(228 35% 12%);
}