/* ==========================================================================
   THEMES.CSS — Atelier Polytech Design Tokens & Theme Switcher
   Dark mode (default) · Light mode via [data-theme='light']
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DARK MODE (Default) - Premium Black & White
   -------------------------------------------------------------------------- */
:root {
  /* — Backgrounds (Pure Black & Charcoal) — */
  --bg-primary: #000000;
  --bg-secondary: #0d0d0d;
  --bg-tertiary: #1a1a1a;
  --bg-card: rgba(13, 13, 13, 0.95);
  --bg-card-hover: rgba(26, 26, 26, 0.98);

  /* — Typography (Pure White to Grays) — */
  --text-primary: #ffffff;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;

  /* — Accent / Brand (Pure White with subtle effects) — */
  --accent: #ffffff;
  --accent-hover: #f5f5f5;
  --accent-dark: #e5e5e5;
  --accent-glow: rgba(255, 255, 255, 0.15);
  --accent-glow-strong: rgba(255, 255, 255, 0.25);

  /* — Gradients (Black to White) — */
  --gradient-hero: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
  --gradient-accent: linear-gradient(135deg, #ffffff, #e5e5e5);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));

  /* — Borders (Subtle White) — */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(255, 255, 255, 0.3);

  /* — Shadows (Deep Black) — */
  --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 4px 32px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 8px 64px rgba(0, 0, 0, 0.95);
  --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.15);

  /* — Glassmorphism (Black with transparency) — */
  --glass-bg: rgba(13, 13, 13, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* — Navigation (Pure Black) — */
  --nav-bg: rgba(0, 0, 0, 0.95);

  /* — Button text (contrast against gradient-accent) — */
  --btn-primary-text: #000000;

  /* — Color scheme hint for browser — */
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. LIGHT MODE — Premium White & Gray
   -------------------------------------------------------------------------- */
[data-theme='light'] {
  /* — Backgrounds (Pure White & Light Grays) — */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f0f0f0;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;

  /* — Typography (Black to Grays) — */
  --text-primary: #000000;
  --text-secondary: #525252;
  --text-muted: #737373;

  /* — Accent / Brand (Pure Black) — */
  --accent: #000000;
  --accent-hover: #1a1a1a;
  --accent-dark: #0d0d0d;
  --accent-glow: rgba(0, 0, 0, 0.08);
  --accent-glow-strong: rgba(0, 0, 0, 0.15);

  /* — Gradients (White to Gray) — */
  --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
  --gradient-accent: linear-gradient(135deg, #000000, #1a1a1a);
  --gradient-card: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.01));

  /* — Borders (Subtle Black) — */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-accent: rgba(0, 0, 0, 0.2);

  /* — Shadows (Soft Black) — */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 24px rgba(0, 0, 0, 0.05);

  /* — Glassmorphism (White with transparency) — */
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* — Navigation (Pure White) — */
  --nav-bg: rgba(255, 255, 255, 0.95);

  /* — Button text (contrast against gradient-accent) — */
  --btn-primary-text: #ffffff;

  /* — Color scheme hint for browser — */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. GLOBAL THEME TRANSITION
   Smooth cross-fade when switching themes.
   We intentionally EXCLUDE transform & opacity so scroll/hover
   animations remain GPU-accelerated and jank-free.
   -------------------------------------------------------------------------- */
* {
  transition:
    background-color 0.4s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   4. THEME TOGGLE BUTTON
   Circular button housing a sun / moon icon swap.
   Expected markup:
     <button class="theme-toggle" aria-label="Toggle theme">
       <span class="theme-toggle__icon theme-toggle__icon--sun">☀️</span>
       <span class="theme-toggle__icon theme-toggle__icon--moon">🌙</span>
     </button>
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-accent);
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  z-index: 1001;
  flex-shrink: 0;
}

/* Subtle glow ring on hover */
.theme-toggle:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

/* Focus-visible for keyboard accessibility */
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Icon base ---------- */
.theme-toggle__icon {
  position: absolute;
  font-size: 1.2rem;
  line-height: 1;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
  will-change: transform, opacity;
}

/* ---------- Dark mode (default): show Moon, hide Sun ---------- */
.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* ---------- Light mode: show Sun, hide Moon ---------- */
[data-theme='light'] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme='light'] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------- Active press micro-feedback ---------- */
.theme-toggle:active {
  transform: scale(0.92);
}

/* ==========================================================================
   5. THEME-AWARE LOGO FILTERS
   Uses brightness(0) to flatten to pure black first, then invert(1) to get
   pure white in dark mode. This approach works reliably regardless of
   the original image background color.
   ========================================================================== */

/* Legacy: Dark mode (default): Invert black logo to white */
.logo-invert {
  filter: invert(1);
}

.logo-invert-shadow-md {
  filter: invert(1) drop-shadow(0 0 30px var(--accent-glow));
}

.logo-invert-shadow-lg {
  filter: invert(1) drop-shadow(0 0 40px var(--accent-glow-strong));
}

/* Legacy: Light mode: Keep black logo as black */
[data-theme='light'] .logo-invert {
  filter: invert(0);
}

[data-theme='light'] .logo-invert-shadow-md {
  filter: invert(0) drop-shadow(0 0 30px var(--accent-glow));
}

[data-theme='light'] .logo-invert-shadow-lg {
  filter: invert(0) drop-shadow(0 0 40px var(--accent-glow-strong));
}

/* ---------- NEW: Adaptive Logo (brightness + invert approach) ---------- */
/* Dark mode (default): Force logo to pure white */
.logo-theme-adaptive {
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

/* Light mode: Force logo to pure black */
[data-theme='light'] .logo-theme-adaptive {
  filter: brightness(0) invert(0);
}

/* Also handle system preference directly for when data-theme isn't set */
@media (prefers-color-scheme: light) {
  .logo-theme-adaptive {
    filter: brightness(0) invert(0);
  }
}

@media (prefers-color-scheme: dark) {
  .logo-theme-adaptive {
    filter: brightness(0) invert(1);
  }
}

/* Explicit data-theme overrides media query */
[data-theme='dark'] .logo-theme-adaptive {
  filter: brightness(0) invert(1);
}

[data-theme='light'] .logo-theme-adaptive {
  filter: brightness(0) invert(0);
}