/* Medora cloud — light / dark / auto theme tokens */
html[data-theme-effective="light"] {
  color-scheme: light;
  --footer-bg: #102a43;
  --brand-mark-bg: #334e68;
  --ink-faint: #94a3b8;
  --primary-50: #f0f4f8;
  --primary-100: #d9e2ec;
  --primary-200: #bcccdc;
  --primary-400: #627d98;
  --primary-500: #486581;
  --primary-600: #334e68;
  --primary-700: #243b53;
  --primary-800: #1a365d;
  --primary-900: #102a43;
  --accent: #0e7490;
  --ink: #102a43;
  --ink-muted: #627d98;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #f0f4f8;
  --surface-card: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --surface-glass-strong: rgba(255, 255, 255, 0.95);
  --border: rgba(51, 78, 104, 0.12);
  --shadow: 0 24px 60px -28px rgba(16, 42, 67, 0.22);
  --shadow-sm: 0 8px 30px -12px rgba(51, 78, 104, 0.2);
  --nav-bg: rgba(255, 255, 255, 0.82);
  --hero-gradient: radial-gradient(ellipse 90% 70% at 100% -10%, rgba(51, 78, 104, 0.1), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(14, 116, 144, 0.1), transparent 50%),
    linear-gradient(180deg, var(--primary-50) 0%, var(--surface) 62%);
  --btn-ghost-bg: rgba(255, 255, 255, 0.9);
  --input-bg: #ffffff;
  --input-bg-soft: rgba(248, 250, 252, 0.5);
  --skeleton-a: #eef2f6;
  --skeleton-b: #f8fafc;
  --theme-switch-bg: rgba(255, 255, 255, 0.9);
}

html[data-theme-effective="dark"] {
  color-scheme: dark;
  --footer-bg: #0b1220;
  --brand-mark-bg: #334e68;
  --primary-50: #1a2332;
  --primary-100: #243247;
  --primary-200: #334e68;
  --primary-400: #94a3b8;
  --primary-500: #cbd5e1;
  --primary-600: #e2e8f0;
  --primary-700: #f1f5f9;
  --primary-800: #f8fafc;
  --primary-900: #ffffff;
  --accent: #38bdf8;
  --ink: #e2e8f0;
  --ink-muted: #94a3b8;
  --ink-faint: #64748b;
  --surface: #0f172a;
  --surface-elevated: #1e293b;
  --surface-muted: #1a2332;
  --surface-card: #1e293b;
  --surface-glass: rgba(30, 41, 59, 0.92);
  --surface-glass-strong: rgba(30, 41, 59, 0.98);
  --border: rgba(148, 163, 184, 0.2);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 8px 30px -12px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(15, 23, 42, 0.92);
  --hero-gradient: radial-gradient(ellipse 90% 70% at 100% -10%, rgba(51, 65, 85, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(14, 116, 144, 0.18), transparent 50%),
    linear-gradient(180deg, #0f172a 0%, #111827 62%);
  --btn-ghost-bg: rgba(30, 41, 59, 0.95);
  --input-bg: #1e293b;
  --input-bg-soft: rgba(15, 23, 42, 0.65);
  --skeleton-a: #1e293b;
  --skeleton-b: #334155;
  --theme-switch-bg: rgba(30, 41, 59, 0.95);
  --alert-error-bg: rgba(127, 29, 29, 0.35);
  --alert-error-text: #fecaca;
  --alert-success-bg: rgba(6, 78, 59, 0.35);
  --alert-success-text: #a7f3d0;
  --badge-success-bg: rgba(6, 78, 59, 0.35);
  --badge-success-text: #6ee7b7;
}

:root {
  --radius: 1.25rem;
  --max: 72rem;
}

/* Theme switch */
.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--theme-switch-bg);
  gap: 0.15rem;
}

.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.theme-switch__btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.theme-switch__btn.is-active {
  background: var(--primary-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

html[data-theme-effective="dark"] .theme-switch__btn.is-active {
  background: #486581;
  color: #fff;
}

.theme-switch__label {
  display: none;
}

@media (min-width: 768px) {
  .theme-switch__label { display: inline; }
}

.theme-switch--compact .theme-switch__btn {
  min-width: 2rem;
  padding: 0 0.45rem;
}

.theme-switch--compact .theme-switch__label { display: none; }

.auth-theme-bar {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 200;
}

/* Shared surfaces */
body {
  background: var(--surface);
  color: var(--ink);
}

.nav,
.dash-header {
  background: var(--nav-bg) !important;
}

.btn--ghost {
  background: var(--btn-ghost-bg) !important;
  color: var(--primary-800) !important;
}

html[data-theme-effective="dark"] .btn--ghost {
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .btn--primary {
  color: #fff !important;
}

.btn--ghost:hover {
  background: var(--primary-50) !important;
}

html[data-theme-effective="dark"] a:not(.btn):not(.brand) {
  color: var(--accent);
}

html[data-theme-effective="dark"] .nav__links a,
html[data-theme-effective="dark"] .dash-header__nav a {
  color: var(--ink-muted);
}

html[data-theme-effective="dark"] .nav__links a:hover,
html[data-theme-effective="dark"] .dash-header__nav a:hover {
  color: var(--ink);
}

html[data-theme-effective="dark"] .brand__text strong,
html[data-theme-effective="dark"] .brand__text span,
html[data-theme-effective="dark"] .section-head h2,
html[data-theme-effective="dark"] .section-head__label,
html[data-theme-effective="dark"] .hero h1,
html[data-theme-effective="dark"] .hero__badge,
html[data-theme-effective="dark"] .hero__stat strong,
html[data-theme-effective="dark"] .feature-card h3,
html[data-theme-effective="dark"] .step h3,
html[data-theme-effective="dark"] .download-card h2,
html[data-theme-effective="dark"] .download-card__version,
html[data-theme-effective="dark"] .download-card__specs strong,
html[data-theme-effective="dark"] .faq__item summary,
html[data-theme-effective="dark"] .preview__title,
html[data-theme-effective="dark"] .preview__stat-val,
html[data-theme-effective="dark"] .dash-panel__head h2,
html[data-theme-effective="dark"] .dash-hero__title,
html[data-theme-effective="dark"] .dash-stat__value,
html[data-theme-effective="dark"] .dash-list__title,
html[data-theme-effective="dark"] .dash-info-list strong,
html[data-theme-effective="dark"] .login-header h1,
html[data-theme-effective="dark"] .auth-card h1,
html[data-theme-effective="dark"] .card h2 {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .section-head__label {
  color: var(--accent) !important;
}

html[data-theme-effective="dark"] .hero h1 em {
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}

html[data-theme-effective="dark"] .hero__lead,
html[data-theme-effective="dark"] .hero__meta,
html[data-theme-effective="dark"] .hero__stat span,
html[data-theme-effective="dark"] .section-head p,
html[data-theme-effective="dark"] .feature-card p,
html[data-theme-effective="dark"] .step p,
html[data-theme-effective="dark"] .download-card > p,
html[data-theme-effective="dark"] .download-card__specs,
html[data-theme-effective="dark"] .faq__item p,
html[data-theme-effective="dark"] .preview__greet,
html[data-theme-effective="dark"] .preview__stat-lbl,
html[data-theme-effective="dark"] .dash-stat__label,
html[data-theme-effective="dark"] .dash-list__sub,
html[data-theme-effective="dark"] .dash-empty,
html[data-theme-effective="dark"] .dash-info-list span,
html[data-theme-effective="dark"] .dash-footer,
html[data-theme-effective="dark"] .dash-specs,
html[data-theme-effective="dark"] .login-header__desc,
html[data-theme-effective="dark"] .auth-foot {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .hero__meta svg {
  color: var(--accent) !important;
}

html[data-theme-effective="dark"] .dash-step__text {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .dash-step--done .dash-step__text {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .dash-step--pending .dash-step__status {
  color: var(--ink-muted) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}

html[data-theme-effective="dark"] .dash-steps-complete__copy strong {
  color: var(--badge-success-text) !important;
}

html[data-theme-effective="dark"] .dash-steps-complete__copy p {
  color: #86efac !important;
}

html[data-theme-effective="dark"] .dash-badge--primary {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #7dd3fc !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
}

html[data-theme-effective="dark"] .dash-badge--muted {
  background: var(--surface-elevated) !important;
  color: var(--ink-muted) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}

html[data-theme-effective="dark"] .dash-badge--success {
  background: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25) !important;
}

html[data-theme-effective="dark"] .dash-badge--warning {
  background: rgba(180, 83, 9, 0.25) !important;
  color: #fcd34d !important;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25) !important;
}

html[data-theme-effective="dark"] .dash-sync__label,
html[data-theme-effective="dark"] .dash-sync__detail {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .dash-sync__value {
  color: var(--ink) !important;
}

/* Landing page */
html[data-theme-effective="dark"] .hero {
  background: var(--hero-gradient);
}

html[data-theme-effective="light"] .hero {
  background: var(--hero-gradient);
}

.hero__badge,
.hero__stat {
  background: var(--surface-glass) !important;
}

.hero__waves stop:nth-child(1) { stop-color: var(--primary-100); }
html[data-theme-effective="dark"] .hero__waves stop { stop-opacity: 0.35; }

.features,
.download {
  background: var(--surface) !important;
}

.steps,
.faq {
  background: var(--surface-muted) !important;
}

.feature-card,
.faq__item,
.download-card,
.preview,
.preview__stat {
  background: var(--surface-card) !important;
}

.preview {
  border-color: var(--border) !important;
  background: linear-gradient(145deg, var(--surface-card) 0%, var(--surface-muted) 100%) !important;
}

.preview__chrome {
  background: var(--surface-glass-strong) !important;
}

.download-card {
  background: linear-gradient(160deg, var(--surface-card) 0%, var(--surface-muted) 100%) !important;
}

.download-card__version,
.download-card__specs {
  background: var(--surface-glass) !important;
}

.download-card__specs code {
  background: var(--primary-50);
  color: var(--ink);
}

html[data-theme-effective="dark"] .footer {
  background: var(--footer-bg) !important;
}

html[data-theme-effective="dark"] .footer,
html[data-theme-effective="dark"] .footer a,
html[data-theme-effective="dark"] .footer h4,
html[data-theme-effective="dark"] .footer .brand__text span {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme-effective="dark"] .footer h4 {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme-effective="dark"] .footer .brand__text strong {
  color: #fff !important;
}

/* Auth pages */
.auth-page,
.login-form-panel,
.login-card,
.auth-card {
  background: var(--surface) !important;
}

html[data-theme-effective="dark"] .login-tabs {
  background: var(--surface-muted) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}

html[data-theme-effective="dark"] .login-tab {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .login-tab:hover {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .login-tab--active {
  background: var(--surface-card) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
}

html[data-theme-effective="dark"] .login-card {
  background: var(--surface-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

html[data-theme-effective="dark"] .auth-field label,
html[data-theme-effective="dark"] .field label,
html[data-theme-effective="dark"] .auth-strength-text span {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .auth-input::placeholder,
html[data-theme-effective="dark"] .field input::placeholder {
  color: var(--ink-faint) !important;
}

html[data-theme-effective="dark"] .auth-icon,
html[data-theme-effective="dark"] .auth-eye-toggle {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .auth-eye-toggle:hover {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .auth-divider span {
  color: var(--ink-muted) !important;
  background: var(--surface-card) !important;
}

html[data-theme-effective="dark"] .auth-divider::before {
  background: var(--border) !important;
}

html[data-theme-effective="dark"] .auth-google-btn {
  background: var(--surface-elevated) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .auth-google-btn:hover {
  background: var(--primary-50) !important;
}

html[data-theme-effective="dark"] .auth-alert--error {
  background: var(--alert-error-bg) !important;
  color: var(--alert-error-text) !important;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35) !important;
}

html[data-theme-effective="dark"] .auth-alert--success,
html[data-theme-effective="dark"] .auth-alert--info {
  background: var(--alert-success-bg) !important;
  color: var(--alert-success-text) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25) !important;
}

html[data-theme-effective="dark"] .auth-field__err,
html[data-theme-effective="dark"] .field__err {
  color: #fca5a5 !important;
}

html[data-theme-effective="dark"] .login-visual__badge {
  background: var(--surface-glass) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .login-preview,
html[data-theme-effective="dark"] .login-preview__chrome,
html[data-theme-effective="dark"] .login-preview__stat,
html[data-theme-effective="dark"] .login-preview__main-panel {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .login-preview__url,
html[data-theme-effective="dark"] .login-preview__stat-label {
  color: var(--ink-muted) !important;
}

html[data-theme-effective="dark"] .login-preview__stat-value,
html[data-theme-effective="dark"] .login-preview__panel-title {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .login-visual {
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #102a43 100%) !important;
}

html[data-theme-effective="dark"] .brand-logo__name {
  color: var(--ink) !important;
}

html[data-theme-effective="dark"] .brand-logo__tag {
  color: var(--ink-muted) !important;
}

/* Auth pages */

.auth-input,
.auth-field input,
.field input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

.auth-input--password {
  background: var(--input-bg-soft) !important;
}

.auth-input:focus,
.auth-field input:focus,
.field input:focus {
  background: var(--input-bg) !important;
  border-color: var(--primary-500) !important;
}

html[data-theme-effective="dark"] .dash-hero {
  background: linear-gradient(135deg, var(--surface-card) 0%, color-mix(in srgb, var(--surface-muted) 70%, var(--surface-card)) 100%) !important;
}

html[data-theme-effective="dark"] .dash-sync {
  background: var(--surface-glass) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .dash-list__item {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
}

html[data-theme-effective="dark"] .dash-stat__icon {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted)) !important;
  color: var(--accent) !important;
}

html[data-theme-effective="dark"] .faq__item p {
  color: var(--ink-muted) !important;
  background: var(--surface-muted) !important;
}

/* Dashboard */
.dash-shell {
  background: linear-gradient(180deg, var(--surface-muted) 0%, var(--surface) 28%) !important;
}

.dash-hero,
.dash-panel,
.dash-stat,
.dash-list__item {
  background: var(--surface-card) !important;
}

.dash-skeleton {
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%) !important;
  background-size: 200% 100%;
}

.dash-panel__head {
  background: color-mix(in srgb, var(--surface-muted) 35%, var(--surface-card)) !important;
}

.dash-step--pending {
  background: color-mix(in srgb, var(--surface-muted) 45%, var(--surface-card)) !important;
}

.dash-step--pending .dash-step__status {
  background: var(--surface-elevated) !important;
}