/**
 * ViViDio Connect — Central Design: Dark Theme + Animated Gradient Typography
 * Tutorial-style (vividioconnect.web.app/tutorial-en) across all platforms.
 * Canonical location: common/theme/
 * Load after design-system.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ========== DARK THEME TOKENS (default for all platforms) ========== */
:root,
[data-theme="dark"] {
  --vvc-bg-deep: #020617;
  --vvc-bg-surface: #0f172a;
  --vvc-card-bg: rgba(15, 23, 42, 0.6);
  --vvc-card-border: rgba(255, 255, 255, 0.08);
  --vvc-text-main: #f8fafc;
  --vvc-text-muted: #F5F0E6;
  --vvc-text-soft: #E8E4DC;
  --vvc-accent-1: #FEF3C7;
  --vvc-accent-2: #fb923c;
  --vvc-accent-3: #fb923c;
  --vvc-accent-4: #34d399;
  --vvc-gradient-text: linear-gradient(135deg, #fbbf24 0%, #fb923c 20%, #FEF3C7 40%, #a78bfa 60%, #60a5fa 80%, #fb923c 100%);
  --vvc-gradient-text-static: linear-gradient(135deg, #fbbf24 0%, #fb923c 20%, #FEF3C7 40%, #a78bfa 60%, #60a5fa 80%, #fb923c 100%);
  --vvc-gradient-header: linear-gradient(135deg, #fb923c 0%, #a78bfa 50%, #60a5fa 100%);
  --vvc-gradient-bg-size: 200% 200%;
  --vvc-font-heading: 'Sora', 'Segoe UI', sans-serif;
  --vvc-font-body: 'Inter', 'Sora', 'Segoe UI', sans-serif;
}

/* Dark theme only: make secondary/tertiary text cream/off-white for visibility */
html {
  --text-secondary: #F5F0E6;
  --text-tertiary: #E8E4DC;
}

/* ========== BASE DARK THEME — always applied (no light theme) ========== */
.vvc-theme-dark,
[data-theme="dark"],
html {
  background-color: var(--vvc-bg-deep);
  color: var(--vvc-text-main);
}

.vvc-theme-dark body,
[data-theme="dark"] body,
html body {
  background-color: var(--vvc-bg-deep) !important;
  color: var(--vvc-text-main) !important;
  font-family: var(--vvc-font-body) !important;
}

/* Final override: wrappers (User PWA .popup-wrapper, Extension) — load this file last */
html .popup-wrapper,
.vvc-theme-dark .popup-wrapper,
[data-theme="dark"] .popup-wrapper {
  background: var(--vvc-bg-deep) !important;
  color: var(--vvc-text-main) !important;
  box-shadow: none !important;
}

/* Optional: subtle radial glow (like tutorial) */
.vvc-theme-dark .vvc-glow,
[data-theme="dark"] .vvc-glow,
html .vvc-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(251, 146, 60, 0.06) 0%, transparent 40%);
}

/* ========== ANIMATED GRADIENT TEXT (keyframes) ========== */
@keyframes vvc-gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes vvc-gradient-shift {
    0%, 100% { background-position: 50% 50%; }
  }
}

/* ========== TYPOGRAPHY — Headings (gradient + animated, SEO-friendly h1–h6) ========== */
.vvc-heading-1,
.vvc-theme-dark h1,
[data-theme="dark"] h1,
html h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.5em; font-family: var(--vvc-font-heading); }
.vvc-heading-2,
.vvc-theme-dark h2,
[data-theme="dark"] h2,
html h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.5em; font-family: var(--vvc-font-heading); }
.vvc-heading-3,
.vvc-theme-dark h3,
[data-theme="dark"] h3,
html h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.3; margin-bottom: 0.4em; font-family: var(--vvc-font-heading); }
.vvc-heading-4,
.vvc-theme-dark h4,
[data-theme="dark"] h4,
html h4 { font-size: clamp(1rem, 2vw + 0.75rem, 1.25rem); font-weight: 600; line-height: 1.35; margin-bottom: 0.35em; font-family: var(--vvc-font-heading); }
.vvc-heading-5,
.vvc-theme-dark h5,
[data-theme="dark"] h5,
html h5 { font-size: clamp(0.9375rem, 1.5vw + 0.65rem, 1.125rem); font-weight: 600; line-height: 1.4; margin-bottom: 0.3em; font-family: var(--vvc-font-heading); }
.vvc-heading-6,
.vvc-theme-dark h6,
[data-theme="dark"] h6,
html h6 { font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1rem); font-weight: 600; line-height: 1.4; margin-bottom: 0.25em; font-family: var(--vvc-font-heading); }

/* Gradient text for headings — visible, animated */
.vvc-heading-1,
.vvc-heading-2,
.vvc-heading-3,
.vvc-theme-dark h1,
.vvc-theme-dark h2,
.vvc-theme-dark h3,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
html h1,
html h2,
html h3 {
  background: var(--vvc-gradient-text);
  background-size: var(--vvc-gradient-bg-size);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-main);
}

.vvc-heading-4,
.vvc-heading-5,
.vvc-heading-6,
.vvc-theme-dark h4,
.vvc-theme-dark h5,
.vvc-theme-dark h6,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
html h4,
html h5,
html h6 {
  background: var(--vvc-gradient-text-static);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-main);
}

/* Header brand title + subtitle — same gradient + animation as page headings (h1) */
.vvc-theme-dark .vvc-header-brand .vvc-header-title,
.vvc-theme-dark .vvc-header-brand .brand-name,
[data-theme="dark"] .vvc-header-brand .vvc-header-title,
[data-theme="dark"] .vvc-header-brand .brand-name,
html .vvc-header-brand .vvc-header-title,
html .vvc-header-brand .brand-name {
  font-family: var(--vvc-font-heading);
  background: var(--vvc-gradient-text);
  background-size: var(--vvc-gradient-bg-size);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-main);
}
.vvc-theme-dark .vvc-header-brand .vvc-header-subtitle,
.vvc-theme-dark .vvc-header-brand .brand-subtitle,
[data-theme="dark"] .vvc-header-brand .vvc-header-subtitle,
[data-theme="dark"] .vvc-header-brand .brand-subtitle,
html .vvc-header-brand .vvc-header-subtitle,
html .vvc-header-brand .brand-subtitle {
  font-family: var(--vvc-font-heading);
  background: var(--vvc-gradient-text);
  background-size: var(--vvc-gradient-bg-size);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .vvc-heading-1,
  .vvc-heading-2,
  .vvc-heading-3,
  .vvc-theme-dark h1,
  .vvc-theme-dark h2,
  .vvc-theme-dark h3,
  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  html h1,
  html h2,
  html h3 {
    animation: vvc-gradient-shift 10s ease-in-out infinite alternate;
  }
  .vvc-theme-dark .vvc-header-brand .vvc-header-title,
  .vvc-theme-dark .vvc-header-brand .brand-name,
  .vvc-theme-dark .vvc-header-brand .vvc-header-subtitle,
  .vvc-theme-dark .vvc-header-brand .brand-subtitle,
  [data-theme="dark"] .vvc-header-brand .vvc-header-title,
  [data-theme="dark"] .vvc-header-brand .brand-name,
  [data-theme="dark"] .vvc-header-brand .vvc-header-subtitle,
  [data-theme="dark"] .vvc-header-brand .brand-subtitle,
  html .vvc-header-brand .vvc-header-title,
  html .vvc-header-brand .brand-name,
  html .vvc-header-brand .vvc-header-subtitle,
  html .vvc-header-brand .brand-subtitle {
    animation: vvc-gradient-shift 10s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vvc-heading-1,
  .vvc-heading-2,
  .vvc-heading-3,
  .vvc-theme-dark h1,
  .vvc-theme-dark h2,
  .vvc-theme-dark h3,
  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  html h1,
  html h2,
  html h3 {
    animation: none;
    background: var(--vvc-gradient-text-static);
    background-size: 100% 100%;
  }
  .vvc-theme-dark .vvc-header-brand .vvc-header-title,
  .vvc-theme-dark .vvc-header-brand .brand-name,
  .vvc-theme-dark .vvc-header-brand .vvc-header-subtitle,
  .vvc-theme-dark .vvc-header-brand .brand-subtitle,
  [data-theme="dark"] .vvc-header-brand .vvc-header-title,
  [data-theme="dark"] .vvc-header-brand .brand-name,
  [data-theme="dark"] .vvc-header-brand .vvc-header-subtitle,
  [data-theme="dark"] .vvc-header-brand .brand-subtitle,
  html .vvc-header-brand .vvc-header-title,
  html .vvc-header-brand .brand-name,
  html .vvc-header-brand .vvc-header-subtitle,
  html .vvc-header-brand .brand-subtitle {
    animation: none;
    background: var(--vvc-gradient-text-static);
    background-size: 100% 100%;
  }
}

/* ========== BODY TEXT ========== */
.vvc-body,
.vvc-theme-dark p,
[data-theme="dark"] p,
html p {
  font-size: clamp(0.9375rem, 1.2vw + 0.7rem, 1.0625rem);
  line-height: 1.65;
  color: var(--vvc-text-muted);
  font-family: var(--vvc-font-body);
  margin-bottom: 0.75em;
}

.vvc-body-gradient,
.vvc-theme-dark .vvc-body-gradient {
  background: linear-gradient(135deg, #C0C0C0 0%, #a78bfa 33%, #60a5fa 66%, #C0C0C0 100%);
  background-size: var(--vvc-gradient-bg-size);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-muted);
  animation: vvc-gradient-shift 10s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .vvc-body-gradient { animation: none; background-size: 100% 100%; }
}

.vvc-body-small {
  font-size: clamp(0.8125rem, 1vw + 0.6rem, 0.9375rem);
  line-height: 1.6;
  color: var(--vvc-text-soft);
  font-family: var(--vvc-font-body);
}

/* ========== ACCESSIBILITY ========== */
.vvc-heading-1:focus-visible,
.vvc-heading-2:focus-visible,
.vvc-body:focus-visible,
.vvc-theme-dark a:focus-visible,
[data-theme="dark"] a:focus-visible {
  outline: 2px solid var(--vvc-accent-1);
  outline-offset: 2px;
  border-radius: 2px;
}

.vvc-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 0.75rem 1rem;
  background: var(--vvc-bg-surface);
  color: var(--vvc-text-main);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.vvc-skip-link:focus {
  top: 0;
  outline: 2px solid var(--vvc-accent-1);
  outline-offset: 2px;
}

/* ========== DARK CARDS ========== */
.vvc-theme-dark .vvc-card,
[data-theme="dark"] .vvc-card,
html .vvc-card {
  background: var(--vvc-card-bg);
  border: 1px solid var(--vvc-card-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.vvc-theme-dark .vvc-card:hover,
[data-theme="dark"] .vvc-card:hover,
html .vvc-card:hover {
  border-color: var(--vvc-accent-1);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.08);
}
.vvc-theme-dark .vvc-card-title,
[data-theme="dark"] .vvc-card-title,
html .vvc-card-title {
  color: var(--vvc-text-main);
}

/* ========== LINKS ========== */
.vvc-theme-dark a,
[data-theme="dark"] a,
html a {
  color: var(--vvc-accent-1);
}
.vvc-theme-dark a:hover,
[data-theme="dark"] a:hover,
html a:hover {
  color: var(--vvc-accent-2);
}

/* ========== GLOBAL OVERRIDES ========== */
html .status-bar,
.vvc-theme-dark .status-bar,
[data-theme="dark"] .status-bar {
  background: var(--vvc-bg-surface) !important;
  border-bottom: 1px solid var(--vvc-card-border) !important;
}
html .auth-card,
html .send-card,
html .stat-card,
html .vvc-card,
.vvc-theme-dark .auth-card,
.vvc-theme-dark .send-card,
.vvc-theme-dark .stat-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .send-card,
[data-theme="dark"] .stat-card {
  background: var(--vvc-card-bg) !important;
  border: 1px solid var(--vvc-card-border) !important;
  color: var(--vvc-text-main) !important;
}
html .auth-title,
html .auth-desc,
html .brand-subtitle,
.vvc-theme-dark .auth-title,
.vvc-theme-dark .auth-desc,
[data-theme="dark"] .auth-title,
[data-theme="dark"] .auth-desc {
  color: var(--vvc-text-muted) !important;
}
html .profile-modal-content,
html .modal-content-box,
html .pricing-modal,
.vvc-theme-dark .profile-modal-content,
.vvc-theme-dark .modal-content-box,
.vvc-theme-dark .pricing-modal,
[data-theme="dark"] .profile-modal-content,
[data-theme="dark"] .modal-content-box,
[data-theme="dark"] .pricing-modal {
  background: var(--vvc-bg-surface) !important;
  border: 1px solid var(--vvc-card-border) !important;
  color: var(--vvc-text-main) !important;
}
/* Header buttons: plain style; .vvc-btn-1 (📖 हिंदी, 📖 English, My Account) keep their gradient border + gold */
html .header-btn:not(.vvc-btn-1),
.vvc-theme-dark .header-btn:not(.vvc-btn-1),
[data-theme="dark"] .header-btn:not(.vvc-btn-1) {
  color: var(--vvc-text-main) !important;
}
html .header-btn:not(.vvc-btn-1):hover,
.vvc-theme-dark .header-btn:not(.vvc-btn-1):hover,
[data-theme="dark"] .header-btn:not(.vvc-btn-1):hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--vvc-accent-1) !important;
}

html #adminApp,
.vvc-theme-dark #adminApp,
[data-theme="dark"] #adminApp {
  background: var(--vvc-bg-deep) !important;
  color: var(--vvc-text-main) !important;
}

html .content,
html .panel,
html main,
.vvc-theme-dark .content,
.vvc-theme-dark .panel,
[data-theme="dark"] .content,
[data-theme="dark"] .panel {
  background: transparent !important;
  color: var(--vvc-text-main) !important;
}

html .vvc-input,
html .vvc-select,
html .vvc-textarea,
html input:not([type="checkbox"]):not([type="radio"]),
html select,
html textarea,
.vvc-theme-dark .vvc-input,
.vvc-theme-dark .vvc-select,
.vvc-theme-dark .vvc-textarea,
[data-theme="dark"] .vvc-input,
[data-theme="dark"] .vvc-select,
[data-theme="dark"] .vvc-textarea {
  background: var(--vvc-bg-surface) !important;
  border-color: var(--vvc-card-border) !important;
  color: var(--vvc-text-main) !important;
}
html .vvc-label,
.vvc-theme-dark .vvc-label,
[data-theme="dark"] .vvc-label {
  color: var(--vvc-text-muted) !important;
}

html .label,
html .action-title,
html .action-desc,
html .text-muted-small,
html .text-sm-gray,
html .text-gray-300,
html .text-gray-400,
html .form-label.text-gray-300,
.vvc-theme-dark .label,
.vvc-theme-dark .action-title,
.vvc-theme-dark .action-desc,
.vvc-theme-dark .text-muted-small,
.vvc-theme-dark .text-sm-gray,
.vvc-theme-dark .text-gray-300,
.vvc-theme-dark .text-gray-400,
[data-theme="dark"] .label,
[data-theme="dark"] .action-title,
[data-theme="dark"] .action-desc,
[data-theme="dark"] .text-muted-small,
[data-theme="dark"] .text-sm-gray,
[data-theme="dark"] .text-gray-300,
[data-theme="dark"] .text-gray-400 {
  color: #F5F0E6 !important;
}

/* ========== DARK NAV & FOOTER ========== */
html .vvc-navbar,
html .header.vvc-header,
html .header,
.vvc-theme-dark .vvc-navbar,
.vvc-theme-dark .header,
[data-theme="dark"] .vvc-navbar,
[data-theme="dark"] .header {
  background: rgba(2, 6, 23, 0.92) !important;
  border-bottom: 1px solid var(--vvc-card-border) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
html .vvc-navbar-brand,
.vvc-theme-dark .vvc-navbar-brand,
[data-theme="dark"] .vvc-navbar-brand {
  background: var(--vvc-gradient-header);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vvc-text-main);
}