/*
 * Pluggie — Shared Theme Tokens
 * Single source of truth for colors, fonts, radii, transitions.
 * Used by web-new (marketing) and apiserver (app) via static/pluggie-theme.css.
 *
 * Themes:
 *   :root                            — base tokens (theme-agnostic)
 *   html[data-bs-theme="dark"]       — dark theme
 *   html[data-bs-theme="light"]      — light theme
 *
 * The FOUC guard (inline <script> in each HTML <head>) and theme-toggle.js
 * always set an explicit data-bs-theme="dark" or "light" on <html>.
 * "system" mode is resolved to the actual OS preference via matchMedia and
 * also stored as an explicit attribute — the attribute is never removed.
 *
 * Default when localStorage is empty: "dark" (same as apiserver).
 */

/* ===== BASE TOKENS (theme-agnostic) ===== */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --max-w: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Brand accent — indigo (Tailwind indigo-500 / indigo-400) */
  --accent: #6366f1;
  --accent-light: #818cf8;
  --accent-strong: #4f46e5;

  /* Semantic colors — same across themes (only glow alpha differs slightly) */
  --green: #22c55e;
  --orange: #f59e0b;
  --red: #ef4444;
  --blue-info: #3b82f6;
}

/* ===== DARK THEME (default) ===== */
:root,
html[data-bs-theme="dark"] {
  --bg-primary:        #1e1e2e;
  --bg-secondary:      #232336;
  --bg-elevated:       #2a2a3e;
  --bg-card:           rgba(255,255,255,0.07);
  --bg-card-hover:     rgba(255,255,255,0.11);
  --bg-input:          rgba(255,255,255,0.04);
  --bg-input-focus:    rgba(255,255,255,0.08);

  --border-subtle:     rgba(255,255,255,0.12);
  --border-hover:      rgba(255,255,255,0.20);
  --border-strong:     rgba(255,255,255,0.30);

  --text-primary:      #f0f0f5;
  --text-secondary:    #b0b0c4;
  --text-tertiary:     #8888a0;
  --text-on-accent:    #ffffff;

  --accent-glow:        rgba(99,102,241,0.18);
  --accent-glow-strong: rgba(99,102,241,0.35);
  --green-glow:         rgba(34,197,94,0.15);
  --red-glow:           rgba(239,68,68,0.15);

  --nav-bg:            rgba(26,26,40,0.90);
  --problem-bg:        rgba(239,68,68,0.06);
  --problem-border:    rgba(239,68,68,0.16);
  --solution-bg:       rgba(34,197,94,0.06);
  --solution-border:   rgba(34,197,94,0.16);

  /* For images that look white on dark, dark on light. Used by logos.
   * In dark mode, the white-stroke logo needs no filter. */
  --logo-filter: none;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);

  color-scheme: dark;
}

/* ===== LIGHT THEME ===== */
html[data-bs-theme="light"] {
  --bg-primary:        #fafafa;
  --bg-secondary:      #f4f4f8;
  --bg-elevated:       #ffffff;
  --bg-card:           #ffffff;
  --bg-card-hover:     #f8f8fc;
  --bg-input:          #ffffff;
  --bg-input-focus:    #ffffff;

  --border-subtle:     rgba(15,15,30,0.10);
  --border-hover:      rgba(15,15,30,0.18);
  --border-strong:     rgba(15,15,30,0.28);

  --text-primary:      #1a1a2e;
  --text-secondary:    #4a4a5e;
  --text-tertiary:     #6b6b80;
  --text-on-accent:    #ffffff;

  --accent-glow:        rgba(99,102,241,0.10);
  --accent-glow-strong: rgba(99,102,241,0.22);
  --green-glow:         rgba(34,197,94,0.12);
  --red-glow:           rgba(239,68,68,0.10);

  --nav-bg:            rgba(20,20,35,0.92);
  --problem-bg:        rgba(239,68,68,0.04);
  --problem-border:    rgba(239,68,68,0.18);
  --solution-bg:       rgba(34,197,94,0.05);
  --solution-border:   rgba(34,197,94,0.20);

  /* The Pluggie logo is white-stroke. In light theme, invert to dark. */
  --logo-filter: invert(1);

  --shadow-sm: 0 1px 2px rgba(15,15,30,0.06);
  --shadow-md: 0 4px 12px rgba(15,15,30,0.08);
  --shadow-lg: 0 12px 32px rgba(15,15,30,0.10);

  color-scheme: light;
}

/* ===== SYSTEM PREFERENCE (when no data-theme is set) ===== */
@media (prefers-color-scheme: light) {
  html:not([data-bs-theme]) {
    --bg-primary:        #fafafa;
    --bg-secondary:      #f4f4f8;
    --bg-elevated:       #ffffff;
    --bg-card:           #ffffff;
    --bg-card-hover:     #f8f8fc;
    --bg-input:          #ffffff;
    --bg-input-focus:    #ffffff;

    --border-subtle:     rgba(15,15,30,0.10);
    --border-hover:      rgba(15,15,30,0.18);
    --border-strong:     rgba(15,15,30,0.28);

    --text-primary:      #1a1a2e;
    --text-secondary:    #4a4a5e;
    --text-tertiary:     #6b6b80;

    --accent-glow:        rgba(99,102,241,0.10);
    --accent-glow-strong: rgba(99,102,241,0.22);
    --green-glow:         rgba(34,197,94,0.12);
    --red-glow:           rgba(239,68,68,0.10);

    --nav-bg:            rgba(255,255,255,0.85);
    --problem-bg:        rgba(239,68,68,0.04);
    --problem-border:    rgba(239,68,68,0.18);
    --solution-bg:       rgba(34,197,94,0.05);
    --solution-border:   rgba(34,197,94,0.20);

    --logo-filter: invert(1);

    --shadow-sm: 0 1px 2px rgba(15,15,30,0.06);
    --shadow-md: 0 4px 12px rgba(15,15,30,0.08);
    --shadow-lg: 0 12px 32px rgba(15,15,30,0.10);

    color-scheme: light;
  }
}

/* ===== UNIVERSAL HELPERS ===== */

/* Smooth color transitions when theme switches (skip transform/layout) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              fill 0.25s ease,
              stroke 0.25s ease,
              box-shadow 0.25s ease !important;
  transition-delay: 0s !important;
}

/* Logo helper class — apply to any <img> that is white-stroke. */
.pluggie-logo-img {
  filter: var(--logo-filter);
}

/* Navbar always uses the dark surface (so the white Pluggie logo and
 * dark/light system stays consistent across themes). The rest of the
 * page (body, cards, footer) follows the active theme normally. */
html[data-bs-theme="light"] .nav,
html:not([data-bs-theme]) .nav {
  background: rgba(26,26,40,0.90);
  border-bottom-color: rgba(255,255,255,0.12);
}
html[data-bs-theme="light"] .nav-links a,
html[data-bs-theme="light"] .nav-back,
html:not([data-bs-theme]) .nav-links a,
html:not([data-bs-theme]) .nav-back {
  color: #b0b0c4;
}
html[data-bs-theme="light"] .nav-links a:hover,
html[data-bs-theme="light"] .nav-back:hover,
html:not([data-bs-theme]) .nav-links a:hover,
html:not([data-bs-theme]) .nav-back:hover {
  color: #f0f0f5;
}
html[data-bs-theme="light"] .nav-logo,
html:not([data-bs-theme]) .nav-logo {
  color: #f0f0f5;
}
/* Navbar ghost CTA ("Sign in", "Go Pro") — keep dark-themed in light/system */
html[data-bs-theme="light"] .nav .nav-cta-ghost,
html:not([data-bs-theme]) .nav .nav-cta-ghost {
  color: #b0b0c4;
  border-color: rgba(255,255,255,0.12);
}
html[data-bs-theme="light"] .nav .nav-cta-ghost:hover,
html:not([data-bs-theme]) .nav .nav-cta-ghost:hover {
  color: var(--accent-light);
  border-color: var(--accent);
  background: rgba(99,102,241,0.15);
}
html[data-bs-theme="light"] .nav .nav-cta-ghost .nav-cta-pro-price,
html:not([data-bs-theme]) .nav .nav-cta-ghost .nav-cta-pro-price {
  color: rgba(176,176,196,0.7);
}
/* Navbar mobile toggle — keep dark-themed */
html[data-bs-theme="light"] .nav .nav-mobile-toggle,
html:not([data-bs-theme]) .nav .nav-mobile-toggle {
  color: #b0b0c4;
}
/* Navbar mobile menu — keep dark-themed */
html[data-bs-theme="light"] .nav-mobile-menu,
html:not([data-bs-theme]) .nav-mobile-menu {
  background: rgba(26,26,40,0.97);
  border-bottom-color: rgba(255,255,255,0.12);
}
html[data-bs-theme="light"] .nav-mobile-menu a,
html:not([data-bs-theme]) .nav-mobile-menu a {
  color: #b0b0c4;
  border-bottom-color: rgba(255,255,255,0.08);
}
html[data-bs-theme="light"] .nav-mobile-menu a:hover,
html:not([data-bs-theme]) .nav-mobile-menu a:hover {
  color: #f0f0f5;
}
/* Navbar theme toggle button — keep dark-themed regardless of page theme */
html[data-bs-theme="light"] .nav .theme-toggle__btn,
html:not([data-bs-theme]) .nav .theme-toggle__btn {
  color: #b0b0c4;
  border-color: rgba(255,255,255,0.12);
}
html[data-bs-theme="light"] .nav .theme-toggle__btn:hover,
html:not([data-bs-theme]) .nav .theme-toggle__btn:hover {
  color: #f0f0f5;
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.07);
}

/* Invert the white-stroke Pluggie logo to dark, ONLY in the footer
 * (and article-footer) in light theme. Navbar logo stays white because
 * navbar background stays dark. */
html[data-bs-theme="light"] .footer-brand img,
html[data-bs-theme="light"] .article-footer-brand img {
  filter: invert(1);
}
@media (prefers-color-scheme: light) {
  html:not([data-bs-theme]) .footer-brand img,
  html:not([data-bs-theme]) .article-footer-brand img {
    filter: invert(1);
  }
}

/* ===== THEME TOGGLE WIDGET (used by both sites) ===== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle__btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-card);
}
.theme-toggle__btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.theme-toggle__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: var(--bg-elevated, var(--bg-secondary));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.theme-toggle[data-open="true"] .theme-toggle__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-toggle__menu li { margin: 0; padding: 0; }

.theme-toggle__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.theme-toggle__option:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.theme-toggle__option[aria-current="true"] {
  color: var(--accent-light);
  background: var(--accent-glow);
}
.theme-toggle__option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.theme-toggle__option-check {
  margin-left: auto;
  color: var(--accent);
  opacity: 0;
}
.theme-toggle__option[aria-current="true"] .theme-toggle__option-check {
  opacity: 1;
}
