/* ============================================================
   AIYNA — Shared styles: CSS variables, dark mode, toggles
   Loaded on every page. Overrides inline styles via specificity.
   ============================================================ */

/* ── Light mode (default) ────────────────────────────────── */
:root {
  --bg:          #f5f5f7;
  --surface:     #ffffff;
  --border:      #eeeeee;
  --border2:     #e0e0e0;
  --text:        #1a1a1a;
  --text2:       #555555;
  --text3:       #999999;
  --accent:      #7F77DD;
  --accent-bg:   #EEEDFE;
  --accent-dark: #534AB7;
  --green-bg:    #E1F5EE;
  --green-text:  #085041;
  --input-bg:    #f9f9f9;
  --nav-bg:      #ffffff;
  --card-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #111111;
  --surface:     #1e1e1e;
  --border:      #2e2e2e;
  --border2:     #3a3a3a;
  --text:        #f0f0f0;
  --text2:       #bbbbbb;
  --text3:       #777777;
  --accent:      #9b93e8;
  --accent-bg:   #252040;
  --accent-dark: #a89ff0;
  --green-bg:    #0d2a20;
  --green-text:  #6fcfaa;
  --input-bg:    #282828;
  --nav-bg:      #1a1a1a;
  --card-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ── Apply variables ─────────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] .card,
[data-theme="dark"] .section,
[data-theme="dark"] .cloth-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .result-card,
[data-theme="dark"] .saved-card,
[data-theme="dark"] .feat-card,
[data-theme="dark"] .mode-card.in,
[data-theme="dark"] .pwa-strip,
[data-theme="dark"] .weather-strip,
[data-theme="dark"] .outfit-preview {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .nav-bottom {
  background: var(--nav-bg);
  border-color: var(--border);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--input-bg);
  border-color: var(--border2);
  color: var(--text);
}
[data-theme="dark"] .field label,
[data-theme="dark"] .section-title {
  color: var(--text3);
}
[data-theme="dark"] .tagline,
[data-theme="dark"] .hero p,
[data-theme="dark"] .section p,
[data-theme="dark"] .feat-card p,
[data-theme="dark"] .cloth-meta,
[data-theme="dark"] .weather-desc,
[data-theme="dark"] .result-reasoning,
[data-theme="dark"] .selfie-hint,
[data-theme="dark"] .pwa-left p {
  color: var(--text2);
}
[data-theme="dark"] .logo { color: var(--text); }
[data-theme="dark"] .logo span { color: var(--accent); }
[data-theme="dark"] .filter-chip {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text2);
}
[data-theme="dark"] .filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .type-btn {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text);
}
[data-theme="dark"] .type-btn.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-dark);
}
[data-theme="dark"] .upload-zone {
  border-color: var(--border2);
}
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-bg);
}
[data-theme="dark"] .ai-result {
  background: var(--accent-bg);
}
[data-theme="dark"] .ai-tag {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--accent-dark);
}
[data-theme="dark"] .step { border-color: var(--border); }
[data-theme="dark"] .divider { background: var(--border); }
[data-theme="dark"] footer,
[data-theme="dark"] .footer-link { color: var(--text3); }
[data-theme="dark"] .btn-secondary {
  color: var(--text);
  border-color: var(--border2);
}
[data-theme="dark"] .btn-secondary:hover { background: var(--surface); }
[data-theme="dark"] .btn-cancel {
  background: var(--input-bg);
  color: var(--text2);
}
[data-theme="dark"] .btn-google {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text);
}
[data-theme="dark"] .btn-google:hover { background: var(--input-bg); }
[data-theme="dark"] .btn-loc {
  background: var(--input-bg);
  border-color: var(--border2);
  color: var(--text2);
}
[data-theme="dark"] .tabs,
[data-theme="dark"] .mode-toggle { background: var(--border); }
[data-theme="dark"] .tab.active,
[data-theme="dark"] .mode-btn.active { background: var(--surface); }
[data-theme="dark"] .hero-badge {
  background: var(--accent-bg);
  color: var(--accent-dark);
}
[data-theme="dark"] .step-num {
  background: var(--accent-bg);
  color: var(--accent-dark);
}
[data-theme="dark"] .mode-card.out {
  background: var(--green-bg);
}
[data-theme="dark"] .out-banner {
  background: var(--green-bg);
  color: var(--green-text);
}
[data-theme="dark"] .onboard-banner {
  background: var(--accent-bg);
  color: var(--accent-dark);
}
[data-theme="dark"] .pick-card {
  background: var(--surface);
  border-color: var(--border2);
}
[data-theme="dark"] .pick-card.selected { border-color: var(--accent); }
[data-theme="dark"] .pick-card-label { color: var(--text2); }
[data-theme="dark"] .detail-tag {
  background: var(--input-bg);
  color: var(--text2);
}
[data-theme="dark"] .color-chip {
  background: var(--surface);
  border-color: var(--border2);
}
[data-theme="dark"] .nav-item { color: var(--text3); }
[data-theme="dark"] .nav-item.active { color: var(--accent); }
[data-theme="dark"] .saved-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .loading-overlay { background: rgba(17,17,17,.92); }
[data-theme="dark"] .loading-overlay p { color: var(--accent-dark); }

/* ── Theme / Lang toggle buttons ─────────────────────────── */
.topbar-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ctrl-btn {
  background: transparent;
  border: 1px solid var(--border2, #e0e0e0);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text2, #555);
  line-height: 1;
  transition: background .15s, border-color .15s;
}
.ctrl-btn:hover {
  background: var(--accent-bg, #EEEDFE);
  border-color: var(--accent, #7F77DD);
  color: var(--accent, #7F77DD);
}