/* Tema Antes/Depois + Ryka: claro branco e escuro automático pelo aparelho. */
:root {
  color-scheme: light;
  --ad-bg: #FFFFFF;
  --ad-bg-soft: #FFFFFF;
  --ad-surface: #FFFFFF;
  --ad-surface-raised: #FFFFFF;
  --ad-surface-strong: #FFFFFF;
  --ad-ink: #2B2318;
  --ad-ink-soft: #5C5140;
  --ad-muted: #766B5B;
  --ad-border: #DED3BC;
  --ad-border-soft: #E9E0D0;
  --ad-primary: #2B2318;
  --ad-primary-hover: #5C5140;
  --ad-on-primary: #FFFFFF;
  --ad-gold: #B98A2F;
  --ad-gold-text: #8A6520;
  --ad-gold-soft: #FFFFFF;
  --ad-focus: #8A6520;
  --ad-overlay: rgb(43 35 24 / 58%);
  --ad-shadow: rgb(43 35 24 / 12%);
  --blue: var(--ad-gold-text);
  --ink: var(--ad-ink);
  --muted: var(--ad-muted);
  --line: var(--ad-border);
  --surface: var(--ad-bg-soft);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ad-bg: #0F0D0B;
  --ad-bg-soft: #16130E;
  --ad-surface: #211B15;
  --ad-surface-raised: #2B2318;
  --ad-surface-strong: #3A3024;
  --ad-ink: #FFFFFF;
  --ad-ink-soft: #D9D0C2;
  --ad-muted: #A99F8D;
  --ad-border: #4B4032;
  --ad-border-soft: #352D24;
  --ad-primary: #D4B07A;
  --ad-primary-hover: #ECD3A3;
  --ad-on-primary: #2B2318;
  --ad-gold: #D4B07A;
  --ad-gold-text: #ECD3A3;
  --ad-gold-soft: #342A1F;
  --ad-focus: #ECD3A3;
  --ad-overlay: rgb(15 13 11 / 76%);
  --ad-shadow: rgb(0 0 0 / 42%);
}

html, body { background: var(--ad-bg); color: var(--ad-ink); }
body, .app-shell, .main-app, .auth-experience, dialog { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--ad-focus) !important; }

/* Superfícies principais. As fotos e canvases nunca recebem filtro de tema. */
.auth-story { background: #FFFFFF !important; }
.site-nav, .value-strip, .site-footer, .account-tabs, .studio-section, .faq-items details { border-color: var(--ad-border-soft) !important; }
.app-shell, .main-app, .phone-glass, .auth-experience, .identity-card, .account-group, .members-list, .price-card, .plan-simulator, dialog { background: var(--ad-surface-raised) !important; color: var(--ad-ink) !important; border-color: var(--ad-border) !important; }
.prototype-toolbar, .sidebar, .bottom-nav, .setting-group, .account-metric, .studio-preview, .studio-controls, .detail-controls, .post-thumb, .search, .segments, .auth-tabs { background: var(--ad-bg-soft) !important; border-color: var(--ad-border-soft) !important; }
.journey-card, .journey-copy, .final-cta, .guide-banner, .resume-banner, .account-storage, .permissions-card, .app-plan-card, .pending-photo, .camera-demo-credit { background: var(--ad-gold-soft) !important; border-color: var(--ad-border) !important; }
.primary, .button.primary, .nav-cta { background: var(--ad-primary) !important; color: var(--ad-on-primary) !important; box-shadow: 0 5px 18px var(--ad-shadow) !important; }
.primary:hover, .button.primary:hover, .nav-cta:hover { background: var(--ad-primary-hover) !important; }
.secondary, .button.light, .demo-access, .edit-photo-cta { background: var(--ad-gold-soft) !important; color: var(--ad-gold-text) !important; border-color: var(--ad-border) !important; }
.text-button, .account-link, .forgot-password, .text-link, .back-button, .prototype-site-link { color: var(--ad-gold-text) !important; }
.nav-button.active, .segments button.active, .auth-tabs .active { background: var(--ad-surface-raised) !important; color: var(--ad-gold-text) !important; }
input:not([type="range"]):not([type="color"]), select, textarea { background-color: var(--ad-surface) !important; color: var(--ad-ink) !important; border-color: var(--ad-border) !important; }
input::placeholder, textarea::placeholder { color: var(--ad-muted) !important; opacity: .72; }
input[type="range"], input[type="checkbox"] { accent-color: var(--ad-gold); }
.account-row, .setting-row, .member-row, .session-row, .activity-event { border-color: var(--ad-border-soft) !important; }
.account-row b, .member-info b, .session-row b, .activity-event h3 { color: var(--ad-ink-soft) !important; }
.role-pill.owner, .role-pill.admin, .current-session, .price-badge { background: var(--ad-gold-soft) !important; color: var(--ad-gold-text) !important; }
.storage-meter, .mini-meter { background: var(--ad-border-soft) !important; }
.storage-meter > span, .mini-meter > span, .scroll-progress { background: var(--ad-gold) !important; }
.switch.on { background: var(--ad-gold) !important; }
.filter-tile.active > span, .camera-preset-grid button.active > span, .template-card.active, .format-list button.active { border-color: var(--ad-gold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad-gold) 20%, transparent) !important; }
.filter-tile.active b, .camera-preset-grid button.active b, .adjustment-tools .active small, .permission-yes { color: var(--ad-gold-text) !important; }
.adjustment-tools button.active > span { background: var(--ad-gold-soft) !important; border-color: var(--ad-gold) !important; color: var(--ad-gold-text) !important; }
.safe-guide { border-color: var(--ad-gold) !important; }
.safe-guide span { background: var(--ad-gold-text) !important; }

/* O editor e o visor permanecem escuros para preservar contraste sobre imagens. */
.editing-section, .editor-canvas-area, .camera-device, .viewfinder, .camera-slot { background: #0F0D0B !important; color: #FFFFFF !important; }
.interactive-editor { background: #211B15 !important; border-color: #4B4032 !important; }

:root[data-theme="dark"] .auth-story { background: linear-gradient(145deg, #211B15, #16130E) !important; }
:root[data-theme="dark"] .auth-form-area { background: var(--ad-surface) !important; }
:root[data-theme="dark"] .hero-phone { border-color: #8A795F; background: linear-gradient(110deg, #5C5140, #0F0D0B 45%, #8A795F); box-shadow: 15px 35px 60px rgb(0 0 0 / 40%), 0 0 0 1px #4B4032; }
:root[data-theme="dark"] .mock-bottom { background: rgb(33 27 21 / 88%) !important; }
:root[data-theme="dark"] .floating-compare, :root[data-theme="dark"] .floating-storage { background: rgb(43 35 24 / 92%) !important; border-color: var(--ad-border) !important; }
:root[data-theme="dark"] .mock-photo > span, :root[data-theme="dark"] .floating-photo > span, :root[data-theme="dark"] .compare-badge, :root[data-theme="dark"] .photo-label { background: rgb(43 35 24 / 86%) !important; color: #FFFFFF !important; }
:root[data-theme="dark"] dialog::backdrop { background: var(--ad-overlay); }

@media (prefers-reduced-motion: reduce) { body, .app-shell, .main-app, .auth-experience, dialog { transition: none; } }.theme-control{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.theme-control-head{display:flex;flex-direction:column;gap:2px}
.theme-control-head small{color:var(--ad-ink-soft)}
.theme-control-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--ad-bg-soft);border-radius:12px;padding:4px}
.theme-control-options button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--ad-ink);font:inherit;font-weight:600;cursor:pointer}
.theme-control-options button[aria-checked="true"]{background:var(--ad-surface-raised,var(--ad-surface));box-shadow:0 1px 3px rgb(0 0 0 / 15%)}