/* ============================================================
   SLIDES — Linear.app-inspired design system
   ============================================================
   Minimal CSS that Tailwind CDN can't handle:
   keyframes, state toggles, theme transition, accent colors.
   ============================================================ */

/* ── Slide show/hide ───────────────────────────────────────── */
/* !important beats Tailwind CDN's injected <style> order */
.slide { display: none !important; }
.slide.active {
  display: block !important;
  animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Menu overlay ──────────────────────────────────────────── */
.menu-overlay { display: none; }
.menu-overlay.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Theme transition ──────────────────────────────────────── */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
}
.skip-link:focus { top: 1rem; }

/* ── Screen reader only ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Progress bar ──────────────────────────────────────────── */
.progress-fill {
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Focus ring (accessibility) ────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Accent color custom properties ────────────────────────── */
/* Dark mode defaults (higher saturation for dark backgrounds) */
[data-accent="unit-1"] { --accent: #5B9BF0; --accent-light: #93BBFF; --accent-hover: #6FA8F5; --accent-glow: rgba(91,155,240,0.2); }
[data-accent="unit-2"] { --accent: #4ADE80; --accent-light: #86EFAC; --accent-hover: #5CE68F; --accent-glow: rgba(74,222,128,0.2); }
[data-accent="unit-3"] { --accent: #FBBF24; --accent-light: #FCD34D; --accent-hover: #FCC938; --accent-glow: rgba(251,191,36,0.2); }
[data-accent="unit-4"] { --accent: #2DD4BF; --accent-light: #5EEAD4; --accent-hover: #3EDCC9; --accent-glow: rgba(45,212,191,0.2); }
[data-accent="unit-5"] { --accent: #A78BFA; --accent-light: #C4B5FD; --accent-hover: #B399FB; --accent-glow: rgba(167,139,250,0.2); }

/* Light mode — deeper saturation for white backgrounds */
html:not(.dark)[data-accent="unit-1"] { --accent: #1d4ed8; --accent-light: #2563EB; --accent-hover: #2563EB; --accent-glow: rgba(29,78,216,0.12); }
html:not(.dark)[data-accent="unit-2"] { --accent: #15803d; --accent-light: #16A34A; --accent-hover: #16A34A; --accent-glow: rgba(21,128,61,0.12); }
html:not(.dark)[data-accent="unit-3"] { --accent: #b45309; --accent-light: #D97706; --accent-hover: #D97706; --accent-glow: rgba(180,83,9,0.12); }
html:not(.dark)[data-accent="unit-4"] { --accent: #0f766e; --accent-light: #0D9488; --accent-hover: #0D9488; --accent-glow: rgba(15,118,110,0.12); }
html:not(.dark)[data-accent="unit-5"] { --accent: #6d28d9; --accent-light: #7C3AED; --accent-hover: #7C3AED; --accent-glow: rgba(109,40,217,0.12); }

/* ── Design System Button Styles ───────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  padding: 10px 16px;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid currentColor;
  padding: 10px 16px;
}
.btn-secondary:hover {
  background: var(--accent-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid transparent;
  padding: 10px 16px;
}
.btn-ghost:hover {
  background: var(--accent-glow);
}

.btn-nav {
  background: transparent;
  color: var(--accent);
  border: 1px solid;
  border-color: rgba(128, 128, 128, 0.3);
  padding: 8px 14px;
  font-size: 13px;
}
html:not(.dark) .btn-nav {
  border-color: rgba(128, 128, 128, 0.25);
}
.btn-nav:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 4px;
}
.btn-link:hover {
  background: var(--accent-glow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* ── Hide disabled navigation buttons ──────────────────────── */
#prevBtn:disabled,
#nextBtn:disabled,
#prevBtn2:disabled,
#nextBtn2:disabled,
button:disabled#prevBtn,
button:disabled#nextBtn,
button:disabled#prevBtn2,
button:disabled#nextBtn2 {
  display: none !important;
  visibility: hidden !important;
}

/* ── Theme toggle icons - hide based on current theme ───────── */
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }
html:not(.dark) .icon-sun { display: none; }
html:not(.dark) .icon-moon { display: block; }