/* PhoneForge — theme & accent overrides (loaded on all pages) */

/* Background layers — single source of truth (styles.css / landing.css consume these) */
html {
  --pf-bg-base: #06080f;
  --pf-bg-overlay:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(var(--accent-rgb), 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(var(--accent-2-rgb), 0.1), transparent),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(var(--accent-rgb), 0.05), transparent);
  --settings-panel-bg: rgba(12, 18, 32, 0.94);
  --settings-control-bg: rgba(18, 28, 48, 0.88);
  --settings-row-border: rgba(99, 140, 255, 0.1);
}

html[data-bg="aurora"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(var(--accent-rgb), 0.16), transparent),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(var(--accent-2-rgb), 0.14), transparent);
}
html[data-bg="minimal"] {
  --pf-bg-overlay: none;
}
html[data-bg="solid"] {
  --pf-bg-overlay: none;
  --pf-bg-base: #06080f;
}
html[data-bg="midnight"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(30, 27, 75, 0.55), transparent),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(15, 23, 42, 0.85), transparent);
}
html[data-bg="sunset"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(251, 113, 133, 0.14), transparent),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(251, 191, 36, 0.1), transparent);
}

/* Accent palettes — must use html[] so they beat :root in later stylesheets */
html[data-accent="cyan"],
html:not([data-accent]) {
  --accent: #38bdf8;
  --accent2: #818cf8;
  --accent-2: #818cf8;
  --accent-3: #22d3ee;
  --accent-rgb: 56, 189, 248;
  --accent-2-rgb: 129, 140, 248;
  --border-glow: rgba(56, 189, 248, 0.35);
}
html[data-accent="violet"] {
  --accent: #a78bfa;
  --accent2: #8b5cf6;
  --accent-2: #8b5cf6;
  --accent-3: #c4b5fd;
  --accent-rgb: 167, 139, 250;
  --accent-2-rgb: 139, 92, 246;
  --border-glow: rgba(167, 139, 250, 0.4);
}
html[data-accent="emerald"] {
  --accent: #34d399;
  --accent2: #10b981;
  --accent-2: #10b981;
  --accent-3: #6ee7b7;
  --accent-rgb: 52, 211, 153;
  --accent-2-rgb: 16, 185, 129;
  --border-glow: rgba(52, 211, 153, 0.38);
}
html[data-accent="rose"] {
  --accent: #fb7185;
  --accent2: #f43f5e;
  --accent-2: #f43f5e;
  --accent-3: #fda4af;
  --accent-rgb: 251, 113, 133;
  --accent-2-rgb: 244, 63, 94;
  --border-glow: rgba(251, 113, 133, 0.38);
}
html[data-accent="amber"] {
  --accent: #fbbf24;
  --accent2: #f59e0b;
  --accent-2: #f59e0b;
  --accent-3: #fcd34d;
  --accent-rgb: 251, 191, 36;
  --accent-2-rgb: 245, 158, 11;
  --border-glow: rgba(251, 191, 36, 0.4);
}

html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="medium"] { font-size: 16px; }
html[data-font-size="large"] { font-size: 18px; }

html[data-corners="rounded"] { --radius: 16px; }

/* Light theme — tinted surfaces (never pure white) */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #b8c5d9;
  --bg-deep: #b0bdd2;
  --panel: #b4c2d8;
  --bg-panel: #b0bfd6;
  --bg-card: #a8b8d0;
  --pref-surface: #9aacc8;
  --border: rgba(55, 75, 115, 0.28);
  --border-glow: rgba(37, 99, 180, 0.45);
  --text: #152033;
  --dim: #3d4f6a;
  --text-dim: #3d4f6a;
  --success: #047857;
  --gold: #b45309;
  --pf-bg-base: #b0bdd2;
  --settings-panel-bg: #a8b8d0;
  --settings-control-bg: #92a4c0;
  --settings-row-border: rgba(55, 75, 115, 0.18);
}
html[data-theme="light"][data-bg="aurora"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(37, 99, 235, 0.28), transparent),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(109, 40, 217, 0.22), transparent);
}
html[data-theme="light"][data-bg="minimal"] {
  --pf-bg-overlay: none;
}
html[data-theme="light"][data-bg="solid"] {
  --pf-bg-overlay: none;
  --pf-bg-base: #a8b5cb;
}
html[data-theme="light"][data-bg="midnight"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(55, 75, 130, 0.35), transparent),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(40, 55, 95, 0.28), transparent);
}
html[data-theme="light"][data-bg="sunset"] {
  --pf-bg-overlay:
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(225, 80, 110, 0.28), transparent),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(217, 140, 30, 0.24), transparent);
}

html[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="light"] .code-block {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(99, 120, 180, 0.2);
}
[data-theme="light"] .code-block code { color: #0369a1; }
[data-theme="light"] .modal input {
  background: var(--pref-surface);
  color: var(--text);
}
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
}
[data-theme="light"] .info-banner {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
  color: #92400e;
}
[data-theme="light"] .remote-banner {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
[data-theme="light"] .card,
[data-theme="light"] .price-card,
[data-theme="light"] .vault-box {
  background: var(--bg-card);
}
html[data-theme="light"] .platform-tab,
html[data-theme="light"] .modal input,
html[data-theme="light"] .modal-tab,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .setup-step input {
  background: var(--settings-control-bg) !important;
  color: var(--text);
}
html[data-theme="light"] .platform-panel,
html[data-theme="light"] .code-block {
  background: var(--bg-card) !important;
}

html[data-density="compact"] .section-card { padding: 0; }
html[data-density="compact"] .section-header { padding: 14px 18px; }
html[data-density="compact"] .stat-card { padding: 14px 16px; }
html[data-density="compact"] .nav-item { padding: 8px 12px; }
html[data-density="compact"] .content { padding: 16px; }
html[data-density="compact"] .pref-row { padding: 8px 12px; }
html[data-density="compact"] .card { padding: 18px; }
html[data-density="compact"] .hero { padding-bottom: 48px; }

html.no-animations *, html.no-animations *::before, html.no-animations *::after {
  animation: none !important;
  transition: none !important;
}
html.no-grid .grid-bg { display: none; }

html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

html[data-corners="sharp"] {
  --radius: 6px;
}
html[data-corners="sharp"] .card,
html[data-corners="sharp"] .btn,
html[data-corners="sharp"] .section-card,
html[data-corners="sharp"] .stat-card,
html[data-corners="sharp"] .connection-card,
html[data-corners="sharp"] .phone-preview,
html[data-corners="sharp"] .settings-panel,
html[data-corners="sharp"] .modal-content,
html[data-corners="sharp"] .pref-select,
html[data-corners="sharp"] .nav-item,
html[data-corners="sharp"] .toast,
html[data-corners="sharp"] .price-card {
  border-radius: 6px !important;
}

html.high-contrast {
  --border: rgba(255, 255, 255, 0.45);
  --text-dim: #c8d4ea;
  --text: #f4f7ff;
}
html[data-theme="light"].high-contrast {
  --border: rgba(15, 25, 45, 0.45);
  --text-dim: #1e2d45;
  --text: #0a1020;
  --pref-surface: #7a8cad;
  --settings-control-bg: #6e80a0;
  --settings-panel-bg: #7a8cad;
  --bg-card: #8a9cb8;
  --bg-panel: #8a9cb8;
}
html.high-contrast .pref-row,
html.high-contrast .data-table th,
html.high-contrast .data-table td {
  border-color: var(--border) !important;
}

html.no-glass .sidebar,
html.no-glass .section-card,
html.no-glass .stat-card,
html.no-glass .connection-card,
html.no-glass .phone-preview,
html.no-glass .settings-panel,
html.no-glass .card,
html.no-glass .price-card,
html.no-glass .vault-box,
html.no-glass .modal-content,
html.no-glass .faq-item,
html.no-glass .settings-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]).no-glass .sidebar,
html:not([data-theme="light"]).no-glass .section-card,
html:not([data-theme="light"]).no-glass .stat-card,
html:not([data-theme="light"]).no-glass .connection-card,
html:not([data-theme="light"]).no-glass .phone-preview,
html:not([data-theme="light"]).no-glass .settings-panel {
  background: rgba(12, 18, 32, 0.97) !important;
}
html[data-theme="light"].no-glass .section-card,
html[data-theme="light"].no-glass .stat-card,
html[data-theme="light"].no-glass .connection-card,
html[data-theme="light"].no-glass .phone-preview,
html[data-theme="light"].no-glass .settings-panel,
html[data-theme="light"].no-glass .card,
html[data-theme="light"].no-glass .price-card {
  background: var(--pref-surface) !important;
}

html.no-glow .logo-icon,
html.no-glow .brand-icon,
html.no-glow .stat-card:hover,
html.no-glow .connection-card,
html.no-glow .btn-primary,
html.no-glow .price-card.featured,
html.no-glow .quick-btn:hover,
html.no-glow .pulse-dot.online,
html.no-glow .accent-swatch.active {
  box-shadow: none !important;
}

html.mono-data .data-table td,
html.mono-data .data-table th,
html.mono-data .mono,
html.mono-data .setting-key,
html.mono-data .password-cell,
html.mono-data code {
  font-family: var(--mono, ui-monospace, monospace) !important;
}

/* Landing sections — theme-aware (replaces hardcoded inline dark bg) */
.section-muted {
  background: rgba(14, 20, 36, 0.4);
}
html[data-theme="light"] .section-muted {
  background: rgba(55, 75, 115, 0.14);
}