/**
 * sheremet.dev — centralized theme system
 * Light & dark modes via [data-theme] + CSS custom properties
 */

/* ── Theme transition (enabled only during toggle) ── */
html {
  --theme-duration: 400ms;
  --theme-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--theme-duration) var(--theme-ease),
    color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease),
    box-shadow var(--theme-duration) var(--theme-ease),
    fill var(--theme-duration) var(--theme-ease),
    stroke var(--theme-duration) var(--theme-ease),
    filter var(--theme-duration) var(--theme-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}

/* ── Shared tokens ── */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 12px;
  --radius-pill: 999px;
}

/* ── Light theme (primary) ── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #fbfbfd;
  --bg2: #ffffff;
  --bg3: #f5f5f7;
  --surface: #ffffff;
  --surface2: #f0f0f5;
  --border: rgba(0, 0, 0, 0.06);
  --border2: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-glass: rgba(0, 0, 0, 0.08);

  --text: #1d1d1f;
  --text2: #6e6e73;
  --muted: #86868b;

  --accent: #0071e3;
  --accent2: #0077ed;
  --accent3: #2997ff;
  --accent-hover: #0077ed;
  --accent-grad: linear-gradient(135deg, #0071e3 0%, #42a1ff 100%);
  --accent-bg: rgba(0, 113, 227, 0.08);
  --accent-bg-subtle: rgba(0, 113, 227, 0.04);
  --accent-bg-muted: rgba(0, 113, 227, 0.06);
  --accent-bg-hover: rgba(0, 113, 227, 0.12);
  --accent-border: rgba(0, 113, 227, 0.28);
  --accent-border-soft: rgba(0, 113, 227, 0.18);
  --accent-border-strong: rgba(0, 113, 227, 0.35);
  --accent-hover-bg: rgba(0, 113, 227, 0.06);

  --green: #34c759;
  --promo-grad-start: rgba(0, 113, 227, 0.06);
  --promo-grad-end: rgba(99, 102, 241, 0.06);

  --btn-on-accent: #ffffff;
  --nav-bg: rgba(251, 251, 253, 0.94);
  --nav-bg-solid: #fbfbfd;
  --overlay-bg: rgba(251, 251, 253, 0.72);
  --glass-bg: rgba(255, 255, 255, 0.65);

  --grid-line: rgba(0, 0, 0, 0.04);
  --scanline: rgba(0, 0, 0, 0.015);
  --service-num: rgba(0, 113, 227, 0.06);
  --process-num: rgba(0, 113, 227, 0.05);
  --hero-status-bg: rgba(0, 113, 227, 0.06);
  --hero-status-border: rgba(0, 113, 227, 0.18);

  --glow: 0 4px 24px rgba(0, 113, 227, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);

  --portal-bg: #ffffff;
  --portal-header-bg: rgba(251, 251, 253, 0.92);
  --portal-border: rgba(0, 113, 227, 0.14);
  --portal-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --portal-iframe-bg: #f5f5f7;

  --danger: #ff3b30;
  --danger-bg: rgba(255, 59, 48, 0.08);
  --danger-border: rgba(255, 59, 48, 0.35);

  --cursor-ring-border: rgba(0, 113, 227, 0.35);
  --icon-glow: rgba(0, 113, 227, 0.55);
  --icon-glow-strong: rgba(0, 113, 227, 0.95);

  --toggle-track: #e8e8ed;
  --toggle-track-border: rgba(0, 0, 0, 0.06);
  --toggle-thumb: #ffffff;
  --toggle-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
  --toggle-icon: #86868b;
  --toggle-icon-active: #0071e3;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0a0a;
  --bg2: #111111;
  --bg3: #121212;
  --surface: #1a1a1a;
  --surface2: #222222;
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-glass: rgba(255, 255, 255, 0.10);

  --text: #f5f5f7;
  --text2: #a1a1a6;
  --muted: #6e6e73;

  --accent: #409cff;
  --accent2: #2997ff;
  --accent3: #64b5ff;
  --accent-hover: #64b5ff;
  --accent-grad: linear-gradient(135deg, #2563eb 0%, #409cff 100%);
  --accent-bg: rgba(64, 156, 255, 0.10);
  --accent-bg-subtle: rgba(64, 156, 255, 0.05);
  --accent-bg-muted: rgba(64, 156, 255, 0.07);
  --accent-bg-hover: rgba(64, 156, 255, 0.16);
  --accent-border: rgba(64, 156, 255, 0.30);
  --accent-border-soft: rgba(64, 156, 255, 0.20);
  --accent-border-strong: rgba(64, 156, 255, 0.40);
  --accent-hover-bg: rgba(64, 156, 255, 0.08);

  --green: #30d158;
  --promo-grad-start: rgba(64, 156, 255, 0.08);
  --promo-grad-end: rgba(99, 102, 241, 0.08);

  --btn-on-accent: #0a0a0a;
  --nav-bg: rgba(10, 10, 10, 0.94);
  --nav-bg-solid: #0a0a0a;
  --overlay-bg: rgba(10, 10, 10, 0.78);
  --glass-bg: rgba(26, 26, 26, 0.72);

  --grid-line: rgba(255, 255, 255, 0.04);
  --scanline: rgba(0, 0, 0, 0.03);
  --service-num: rgba(64, 156, 255, 0.07);
  --process-num: rgba(64, 156, 255, 0.06);
  --hero-status-bg: rgba(64, 156, 255, 0.07);
  --hero-status-border: rgba(64, 156, 255, 0.22);

  --glow: 0 0 40px rgba(64, 156, 255, 0.18);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  --portal-bg: #121212;
  --portal-header-bg: rgba(18, 18, 18, 0.88);
  --portal-border: rgba(64, 156, 255, 0.16);
  --portal-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(64, 156, 255, 0.08);
  --portal-iframe-bg: #0a0a0a;

  --danger: #ff6961;
  --danger-bg: rgba(255, 105, 97, 0.12);
  --danger-border: rgba(255, 105, 97, 0.40);

  --cursor-ring-border: rgba(64, 156, 255, 0.40);
  --icon-glow: rgba(64, 156, 255, 0.55);
  --icon-glow-strong: rgba(64, 156, 255, 1);

  --toggle-track: #2c2c2e;
  --toggle-track-border: rgba(255, 255, 255, 0.08);
  --toggle-thumb: #636366;
  --toggle-thumb-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  --toggle-icon: #636366;
  --toggle-icon-active: #ffd60a;
}

[data-theme="light"] .cursor { mix-blend-mode: normal; }
[data-theme="dark"] .cursor { mix-blend-mode: normal; }

[data-theme="dark"] .pkg-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .contact-form {
  background: var(--surface);
}

[data-theme="light"] nav {
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .pkg-card,
[data-theme="light"] .case-card,
[data-theme="light"] .contact-form {
  box-shadow: var(--shadow-sm);
}

/* ── SVG icon theming ── */
.svc-icon svg .icon-pulse,
.svc-icon svg .icon-glow,
.svc-icon svg .icon-pulse-3,
.tab-icon .icon-pulse,
.tab-icon .icon-glow {
  stroke: var(--accent) !important;
}
.svc-icon svg .icon-pulse-2,
.tab-icon .icon-pulse-2 {
  stroke: var(--accent2) !important;
}
.svc-icon svg circle.icon-pulse,
.svc-icon svg circle.icon-glow,
.svc-icon svg circle.icon-pulse-2,
.svc-icon svg circle.icon-pulse-3,
.svc-icon svg rect.icon-pulse,
.svc-icon svg rect.icon-pulse-2,
.svc-icon svg rect.icon-pulse-3 {
  fill: var(--accent) !important;
}

/* ── Theme toggle (Apple-style) ── */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.theme-toggle-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--toggle-track);
  border: 1px solid var(--toggle-track-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.theme-toggle-icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}

.theme-toggle-icons svg {
  width: 14px;
  height: 14px;
  color: var(--toggle-icon);
  transition: color var(--theme-duration) var(--theme-ease), opacity var(--theme-duration) var(--theme-ease);
}

.theme-toggle-icon-sun { opacity: 0.45; }
.theme-toggle-icon-moon { opacity: 0.45; }

[data-theme="light"] .theme-toggle-icon-sun { color: var(--toggle-icon-active); opacity: 1; }
[data-theme="dark"] .theme-toggle-icon-moon { color: var(--toggle-icon-active); opacity: 1; }

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--toggle-thumb);
  box-shadow: var(--toggle-thumb-shadow);
  transition: transform 400ms cubic-bezier(0.34, 1.2, 0.64, 1);
  will-change: transform;
}

[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(20px);
  background: #f5f5f7;
}

[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(0);
}

@media (max-width: 768px) {
  .theme-toggle {
    width: 48px;
    height: 30px;
  }
  .theme-toggle-thumb {
    width: 22px;
    height: 22px;
  }
  [data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(18px);
  }
}