/* Shared theme styles — uses CSS variables from css/themes/dark.css & light.css */

@import url('./themes/dark.css');
@import url('./themes/light.css');
@import url('./themes/brand.css');

/* ── Theme toggle ─────────────────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-cyan);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--accent-cyan);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--theme-toggle-hover-bg);
  border-color: var(--theme-toggle-hover-border);
  color: var(--theme-toggle-hover-color);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline; }

/* ── Base layout ──────────────────────────────────────────────────────────── */

body {
  background: var(--bg-base);
  color: var(--text-primary);
}

#webgl-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: var(--sky-fallback);
}

#navbar.navbar-scrolled {
  background: var(--bg-nav-scrolled) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--nav-scrolled-shadow);
}

#experience {
  background: var(--experience-section-bg);
}

#projects {
  background: var(--bg-section-band);
}

#contact {
  background: var(--bg-section-contact);
  box-shadow: var(--contact-inset-shadow);
}

/* ── Section bands ────────────────────────────────────────────────────────── */

.section-band {
  backdrop-filter: blur(var(--section-band-blur));
  -webkit-backdrop-filter: blur(var(--section-band-blur));
}

.section-projects {
  background: var(--bg-section-band);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.section-contact {
  background: var(--bg-section-contact);
  border-top: 1px solid var(--border-cyan);
}

.site-footer {
  background: var(--bg-footer);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-cyan);
}

/* ── Semantic UI components ───────────────────────────────────────────────── */

.hero-avatar-bg {
  background: var(--bg-base) !important;
}

.hero-avatar-ring {
  box-shadow: var(--avatar-ring-shadow) !important;
}

.hero-status-badge--otw {
  border: 1px solid var(--badge-otw-border);
  background: var(--badge-otw-bg);
  color: var(--badge-otw-text);
  font-weight: var(--badge-otw-weight);
  box-shadow: var(--badge-otw-shadow);
}

.hero-status-badge--otw .otw-dot {
  background: var(--badge-otw-dot-bg);
  box-shadow: var(--badge-otw-dot-shadow);
}

.hero-status-badge--otw .otw-dot::before {
  border-color: var(--badge-otw-dot-ring);
}

.hero-status-badge--online {
  border: 1px solid var(--badge-online-border);
  background: var(--badge-online-bg);
  color: var(--badge-online-text);
  font-weight: var(--badge-online-weight);
}

.theme-stat-box {
  background: var(--bg-stat);
  border: 1px solid var(--border-subtle);
  border-radius: 0.25rem;
}

.theme-tag {
  border: 1px solid var(--border-cyan);
  background: var(--bg-stat);
  border-radius: 0.25rem;
}

.theme-skill-pill {
  background: var(--bg-stat);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 0.25rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.theme-icon-box {
  background: var(--bg-stat);
  border: 1px solid var(--border-cyan);
}

.theme-outline-btn {
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s;
}

.theme-outline-btn:hover {
  border-color: var(--outline-btn-hover-border);
  color: var(--outline-btn-hover-color);
}

.theme-demo-btn {
  box-shadow: var(--demo-btn-shadow);
}

.theme-divider {
  border-color: var(--border-subtle) !important;
}

.filter-btn,
.cert-filter-btn {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: var(--filter-btn-bg);
}

.filter-btn:hover:not(.active),
.cert-filter-btn:hover:not(.active) {
  border-color: var(--filter-btn-hover-border);
  color: var(--filter-btn-hover-color);
  background: var(--filter-btn-hover-bg);
}

.filter-btn.active,
.cert-filter-btn.active {
  background: var(--filter-btn-active-bg);
  border-color: var(--accent-magenta);
  color: var(--text-primary);
  box-shadow: var(--filter-btn-active-shadow);
}

.cert-logo__icon {
  color: var(--cert-logo-icon-color);
}

.cert-logo img.cert-logo__icon {
  filter: var(--cert-logo-icon-filter);
}

/* ── Achievement cards ────────────────────────────────────────────────────── */

.achievement-card--academic {
  border-color: var(--card-academic-border);
  background: var(--card-academic-bg);
}

.achievement-card--sports {
  border-color: var(--card-sports-border);
  background: var(--card-sports-bg);
}

.achievement-card--community {
  border-color: var(--card-community-border);
  background: var(--card-community-bg);
}

.achievement-card__icon {
  border: 1px solid var(--border-cyan);
  background: var(--bg-stat);
}

.achievement-card--academic .achievement-card__icon-i,
.achievement-card--academic .achievement-card__detail {
  color: var(--card-academic-accent);
}

.achievement-card--sports .achievement-card__icon-i,
.achievement-card--sports .achievement-card__detail,
.achievement-card--sports .achievement-tournament-icon {
  color: var(--card-sports-accent);
}

.achievement-card--community .achievement-card__icon-i,
.achievement-card--community .achievement-card__detail,
.achievement-card--community .achievement-tournament-icon {
  color: var(--card-community-accent);
}

.achievement-card__detail { opacity: 0.88; }

.achievement-card__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid;
}

.achievement-card__label--academic {
  border-color: var(--card-academic-label-border);
  background: var(--card-academic-label-bg);
  color: var(--card-academic-label-text);
}

.achievement-card__label--sports {
  border-color: var(--card-sports-label-border);
  background: var(--card-sports-label-bg);
  color: var(--card-sports-label-text);
}

.achievement-card__label--community {
  border-color: var(--card-community-label-border);
  background: var(--card-community-label-bg);
  color: var(--card-community-label-text);
}

.achievement-card__summary {
  color: var(--text-secondary);
}

.achievement-tournaments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.achievement-tournaments li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.achievement-tournaments li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.achievement-tournament-icon {
  margin-top: 0.1rem;
  flex-shrink: 0;
  font-size: 0.625rem;
}

/* ── Language cards ───────────────────────────────────────────────────────── */

.language-card {
  border: 1px solid;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.language-card:hover {
  border-color: var(--cyber-card-hover-border);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

.language-card--native {
  border-color: var(--lang-native-border);
  background: var(--lang-native-bg);
}

.language-card--fluent {
  border-color: var(--lang-fluent-border);
  background: var(--lang-fluent-bg);
}

.language-card--basic {
  border-color: var(--lang-basic-border);
  background: var(--lang-basic-bg);
}

/* ── Cards & buttons ──────────────────────────────────────────────────────── */

.cyber-card {
  background: var(--bg-surface);
  border-color: var(--border-cyan);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--cyber-card-blur));
  -webkit-backdrop-filter: blur(var(--cyber-card-blur));
}

.cyber-card:hover {
  border-color: var(--cyber-card-hover-border);
  box-shadow: var(--card-hover-shadow);
}

.cyber-card::before {
  background: var(--card-shimmer);
}

.glow-text {
  text-shadow: var(--glow-text);
}

.glow-text-magenta {
  text-shadow: var(--glow-text-magenta);
}

.section-heading,
.section-heading-lg {
  color: var(--text-primary);
}

.btn-cyber {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: var(--btn-cyber-shadow);
}

.btn-cyber:hover,
.btn-cyber.active {
  background: var(--btn-cyber-hover-bg);
  box-shadow: var(--btn-cyber-hover-shadow);
}

.project-search-input {
  background: var(--bg-input);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.project-search-icon {
  color: var(--project-search-icon-color);
}

#scroll-hint span { color: var(--accent-cyan-soft); }
#scroll-hint i { color: var(--accent-cyan); }

#scroll-journey {
  background: var(--scroll-journey-bg);
  border-top-color: var(--border-cyan);
}

#scroll-journey .journey-label { color: var(--accent-cyan); }

.timeline-dot {
  background: var(--timeline-dot-bg);
  border-color: var(--timeline-dot-border);
  box-shadow: var(--timeline-dot-shadow);
}

#modal-backdrop { background: var(--modal-backdrop); }

#modal-box {
  background: var(--bg-elevated);
  border-color: var(--border-cyan);
  box-shadow: var(--card-shadow);
}

.modal-img-nav {
  background: var(--modal-img-nav-bg);
  border-color: var(--border-cyan);
  color: var(--accent-cyan);
}

.modal-img-gallery { background: var(--modal-img-gallery-bg); }

.modal-img-counter {
  color: var(--text-secondary);
  background: var(--modal-img-counter-bg);
}

.modal-img-placeholder {
  background: var(--modal-img-placeholder-bg);
}

.intro-video-card {
  background: var(--bg-surface);
  border-color: var(--border-cyan);
}

.intro-video-thumb { background: var(--intro-video-thumb-bg); }

#mobile-menu {
  background: var(--bg-nav);
  border-top-color: var(--border-cyan);
}

#mobile-menu a { color: var(--text-nav); }
#mobile-menu a:hover { color: var(--nav-link-hover-color); }

.cert-list-wrap::after {
  background: var(--cert-list-fade);
}

#cert-list {
  scrollbar-color: var(--cert-list-scrollbar);
}

#video-modal-backdrop {
  background: var(--video-modal-backdrop);
}

#video-modal-box {
  background: var(--video-modal-box);
  border-color: var(--border-cyan);
  box-shadow: var(--card-shadow);
}

#video-modal-close {
  background: var(--video-modal-close-bg) !important;
  color: var(--text-secondary);
}

#back-to-top {
  background: var(--back-to-top-bg);
  border-color: var(--border-cyan);
  color: var(--accent-cyan);
  box-shadow: var(--back-to-top-shadow);
}

#back-to-top:hover {
  background: var(--back-to-top-hover-bg);
  box-shadow: var(--back-to-top-hover-shadow);
  border-color: var(--back-to-top-hover-border);
}

/* ── Interactive hovers (token-driven) ───────────────────────────────────── */

.nav-link {
  color: inherit;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--nav-link-hover-color);
}

.footer-link {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--footer-link-hover-color);
}

.icon-btn {
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  border-color: var(--icon-btn-hover-border);
  color: var(--icon-btn-hover-color);
  background: var(--icon-btn-hover-bg);
}

.link-accent {
  color: var(--accent-cyan);
  transition: color 0.2s ease;
}

.link-accent:hover {
  color: var(--cert-link-hover-color);
  text-decoration: underline;
}

.cert-item {
  border-radius: 0.375rem;
  transition: padding-left 0.2s ease, background 0.2s ease;
}

.cert-item:hover {
  padding-left: 0.5rem;
  background: var(--cert-item-hover-bg);
}

.theme-skill-pill--hover-cyan:hover {
  border-color: var(--skill-hover-cyan-border);
  color: var(--skill-hover-cyan-color);
}

.theme-skill-pill--hover-magenta:hover {
  border-color: var(--skill-hover-magenta-border);
  color: var(--skill-hover-magenta-color);
}

.contact-card:hover {
  border-color: var(--contact-card-hover-border);
}

.contact-card:hover .contact-card__icon {
  color: var(--contact-card-hover-icon-color);
  transform: scale(1.1);
}

.contact-card:hover .contact-value {
  color: var(--contact-card-hover-value-color);
}

.project-card__cta {
  color: var(--project-card-cta-color);
  transition: color 0.2s ease;
}

.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta {
  color: var(--project-card-cta-hover-color);
}

.project-card:hover,
.project-card:focus-visible {
  border-color: var(--project-card-hover-border);
  box-shadow: var(--project-card-hover-shadow);
}

#mobile-menu-btn {
  transition: color 0.2s ease;
}

#mobile-menu-btn:hover {
  color: var(--mobile-menu-btn-hover-color);
}

.type-cursor { color: var(--accent-cyan); }

#scroll-progress {
  box-shadow: var(--scroll-progress-shadow);
}

.contact-cta {
  color: var(--contact-cta-text);
  border-color: var(--contact-cta-border);
  background: var(--contact-cta-bg);
}

.skip-link {
  background: var(--accent-cyan);
  color: var(--selection-text);
}

.projects-swipe-hint {
  color: var(--projects-swipe-hint-color);
}

.scanline {
  display: var(--scanline-display);
}

.hud-overlay {
  box-shadow: var(--hud-inset);
}

.hud-overlay::before,
.hud-overlay::after,
.hud-corner-tr,
.hud-corner-bl {
  border-color: var(--hud-color);
  opacity: var(--hud-corner-opacity);
}