/* ════════════════════════════════════════════════════════════════
   win2linux — site-wide theme system
   Loaded on every learner page (FR + EN) alongside scripts/theme.js.
   Light is the default (2026-06-12); theme.js adds html.w2l-light unless
   the learner saved 'dark'. The page-inline palettes stay dark-canonical.
   Terminal surfaces stay dark in both themes (course doctrine).
   ════════════════════════════════════════════════════════════════ */

/* ── Pill toggle (rendered in both themes; injected by theme.js) ── */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.075));
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: border-color 200ms ease, background 200ms ease;
}
.theme-toggle:hover { border-color: rgba(0,196,196,0.4); background: rgba(0,196,196,0.05); }
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent, #00c4c4);
  box-shadow: 0 0 0 3px rgba(0,196,196,0.18);
}
.theme-toggle .theme-toggle-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #00c4c4);
  color: #04181a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), background 200ms ease;
}
.theme-toggle .theme-toggle-knob svg { width: 11px; height: 11px; display: block; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
html.w2l-light .theme-toggle .theme-toggle-knob { transform: translateX(22px); color: #fff; }
html.w2l-light .theme-toggle .icon-sun  { display: block; }
html.w2l-light .theme-toggle .icon-moon { display: none; }
html.w2l-light .theme-toggle { background: rgba(10,20,32,0.05); }
html.w2l-light .theme-toggle:hover { background: rgba(0,138,143,0.08); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .theme-toggle-knob { transition: none; }
}

/* ── Floating pill — shown when the sidebar pill isn't available ── */
.theme-toggle-floating {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1200;
  background: rgba(6,6,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.w2l-light .theme-toggle-floating { background: rgba(255,255,255,0.65); }
html.w2l-has-sidebar .theme-toggle-floating { display: none; }
@media (max-width: 880px) {
  html.w2l-has-sidebar .theme-toggle-floating { display: inline-flex; }
}

/* ── LIGHT THEME — variable remap (module-1 parity palette) ── */
html.w2l-light { color-scheme: light; }
html.w2l-light:root {
  --bg:          #f3f4f6;
  --bg2:         #ffffff;
  --panel:       rgba(10,16,28,0.03);
  --glass:       rgba(10,16,28,0.03);
  --glass-hover: rgba(10,16,28,0.055);
  --border:      rgba(10,20,32,0.13);
  --border-glow: rgba(0,138,143,0.5);

  --accent:      #008a8f;   /* darkened teal for contrast on light */
  --accent-warm: #8a6d1d;
  --warm:        #8a6d1d;
  --green:       #0e8a4d;
  --red:         #c52f2f;
  --yellow:      #9a6f10;
  /* --term-bg intentionally untouched — terminals stay dark */
  --text:        #14202c;
  --text2:       #44566a;
  --text3:       #7e8c9b;

  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 1px rgba(10,20,32,0.05),
    0 24px 64px rgba(15,25,40,0.1),
    0 6px 20px rgba(15,25,40,0.07);
  --shadow-card-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(0,138,143,0.25),
    0 32px 80px rgba(15,25,40,0.14),
    0 0 40px rgba(0,138,143,0.07);
}

/* ── Global chrome ── */
html.w2l-light body { background: var(--bg); color: var(--text); }
html.w2l-light body::before { opacity: 0.035; }   /* grain */
html.w2l-light ::selection { background: rgba(0,138,143,0.2); color: var(--text); }
html.w2l-light ::-webkit-scrollbar-thumb { background: rgba(0,138,143,0.35); }
html.w2l-light .sidebar-nav { border-right-color: rgba(10,20,32,0.1); }
html.w2l-light .sidebar-header,
html.w2l-light .sidebar-mycourse { border-bottom-color: rgba(10,20,32,0.08); }
html.w2l-light .sidebar-module-link:hover { background: rgba(10,20,32,0.04); }

/* ── Dashboard-specific polish (hover shadows, hero, CTA states) ── */
html.w2l-light .dashboard-hero-bg {
  background:
    radial-gradient(ellipse 85% 60% at 50% -5%, rgba(0,138,143,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 80%, rgba(138,109,29,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 15% 70%, rgba(0,138,143,0.04) 0%, transparent 50%);
}
html.w2l-light .dashboard-hero-grid {
  background-image:
    linear-gradient(rgba(10,20,32,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,20,32,0.05) 1px, transparent 1px);
}
html.w2l-light .dashboard-hero-objectives li::before { box-shadow: 0 0 8px rgba(0,138,143,0.4); }
html.w2l-light .progress-ribbon {
  border-color: rgba(0,138,143,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 16px rgba(15,25,40,0.08);
}
html.w2l-light .mcard,
html.w2l-light .lesson-item,
html.w2l-light .module-card,
html.w2l-light .boss {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 1px rgba(10,20,32,0.04),
    0 4px 16px rgba(15,25,40,0.07);
}
html.w2l-light .mcard:hover,
html.w2l-light .lesson-item:hover,
html.w2l-light .module-card:hover {
  border-color: rgba(10,20,32,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(0,138,143,0.18),
    0 8px 30px rgba(15,25,40,0.12);
}
html.w2l-light .boss:hover {
  border-color: rgba(138,109,29,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(138,109,29,0.2),
    0 8px 30px rgba(15,25,40,0.12);
}
html.w2l-light .mcard.locked:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 16px rgba(15,25,40,0.07);
}
html.w2l-light .mcard-status.locked {
  border-color: rgba(10,20,32,0.12);
  background: rgba(10,20,32,0.04);
}
html.w2l-light .next-step-card,
html.w2l-light .next-step-card.lab,
html.w2l-light .next-step-card.ready {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 12px 32px rgba(15,25,40,0.1);
}
html.w2l-light .next-step-card:hover,
html.w2l-light .next-step-card.lab:hover,
html.w2l-light .next-step-card.ready:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 20px 48px rgba(15,25,40,0.16);
}
html.w2l-light .next-step-progress { background: rgba(10,20,32,0.09); }
html.w2l-light .next-step-cta { color: #fff; }
html.w2l-light .cert-cta {
  background: linear-gradient(135deg, rgba(0,138,143,0.07), rgba(138,109,29,0.05));
  border-color: rgba(0,138,143,0.28);
}
html.w2l-light .cert-cta.locked {
  background: rgba(10,20,32,0.03);
  border-color: var(--border);
}
html.w2l-light .cert-cta-btn { color: #fff; }
html.w2l-light .cert-cta-btn:hover { background: var(--text); color: #fff; }
html.w2l-light .cert-cta-btn.disabled {
  background: rgba(10,20,32,0.05);
  color: var(--text3);
}

/* GENERATED — surface overrides for hardcoded dark backgrounds (full-site scan). */
html.w2l-light .boss { background: linear-gradient(135deg, rgba(196,160,48,0.035), rgba(0,196,196,0.02)), rgba(255,255,255,0.92); }
html.w2l-light .cmd-card { background: rgba(255,255,255,0.92); }
html.w2l-light .day-card { background: rgba(255,255,255,0.92); }
html.w2l-light .decision-tree { background: rgba(255,255,255,0.92); }
html.w2l-light .diagram-svg { background: #f3f4f6; }
html.w2l-light .distro-card { background: rgba(255,255,255,0.92); }
html.w2l-light .distro-comparison { background: rgba(255,255,255,0.92); }
html.w2l-light .exercise-card { background: rgba(255,255,255,0.92); }
html.w2l-light .form-card { background: rgba(255,255,255,0.92); }
html.w2l-light .fr-res-card { background: rgba(255,255,255,0.92); }
html.w2l-light .lab-result { background: rgba(255,255,255,0.92); }
html.w2l-light .lab-shell { background: rgba(255,255,255,0.92); }
html.w2l-light .lesson-item { background: rgba(255,255,255,0.92); }
html.w2l-light .mcard { background: rgba(255,255,255,0.92); }
html.w2l-light .mcard.lab { background: linear-gradient(135deg, rgba(212,175,55,0.04), rgba(212,175,55,0.01) 65%), rgba(255,255,255,0.92); }
html.w2l-light .module-card { background: rgba(255,255,255,0.92); }
html.w2l-light .module-nav-btn { background: rgba(255,255,255,0.92); }
html.w2l-light .module-topbar { background: rgba(255,255,255,0.97); }
html.w2l-light .pdemo-vs { background: var(--bg2, #ffffff); }
html.w2l-light .progress-ribbon { background: linear-gradient(180deg, rgba(0,196,196,0.075), rgba(0,196,196,0.025)), rgba(255,255,255,0.92); }
html.w2l-light .quote-summary { background: linear-gradient(180deg, rgba(0,196,196,0.075), rgba(0,196,196,0.03)), rgba(255,255,255,0.92); }
html.w2l-light .reason-card { background: rgba(255,255,255,0.92); }
html.w2l-light .resource-card { background: rgba(255,255,255,0.92); }
html.w2l-light .sidebar-dot::after { background: rgba(255,255,255,0.97); }
html.w2l-light .sidebar-nav { background: rgba(255,255,255,0.97); }
html.w2l-light .stat-card { background: rgba(255,255,255,0.92); }
html.w2l-light .success-card { background: linear-gradient(180deg, rgba(26,184,106,0.08), rgba(26,184,106,0.02)), rgba(255,255,255,0.92); }
html.w2l-light .tier-card { background: rgba(255,255,255,0.92); }
html.w2l-light .topbar { background: rgba(255,255,255,0.97); }
html.w2l-light .trust-strip { background: rgba(255,255,255,0.92); }
html.w2l-light .ws-step { background: rgba(255,255,255,0.92); }

/* GENERATED — terminal "dark islands": dark text vars restored on permanently-dark surfaces. */
html.w2l-light .evidence-video-shell, html.w2l-light .fs-tree, html.w2l-light .lab-terminal, html.w2l-light .lab-terminal-bar, html.w2l-light .terminal-bar, html.w2l-light .terminal-block, html.w2l-light .terminal-block .terminal-bar, html.w2l-light .terminal-mockup, html.w2l-light .video-shell {
  --text: #eef2f7; --text2: #879eb7; --text3: #64788f;
  --accent: #00c4c4; --warm: #c4a030; --accent-warm: #c4a030;
  --green: #1ab86a; --red: #e03e3e; --yellow: #e8a726;
  --border: rgba(255,255,255,0.075);
}