/* Dark look for the marketing/auth pages (index, login, signup, shops,
   activate), ported from media-catalog-pages. Loaded *after* style.css,
   stil.css and auth.css on those pages only, so it only overrides the shared
   design tokens + a few hardcoded colors there - the in-app tool pages
   (app/*.html, admin.html, etc.) don't load this file and keep their
   original light look untouched. */
:root {
  --bg: #0f1220;
  --panel: #181c30;
  --border: #2a3050;
  --text: #e8eaf6;
  --muted: #9aa0c0;
  --accent: #7c8cff;
  --accent-dark: #98a5ff;
  --danger: #ff7b8a;
}

body { color: var(--text); }

a { color: var(--text); }
a:hover { color: var(--accent-dark); }

nav a { color: var(--muted); }
nav a:hover, nav a.active { color: var(--text); }
nav .brand { color: var(--text); }

button { color: #0f1220; }
button.secondary { color: var(--text); }

.auth-card { background: var(--panel); }
.auth-field input,
.auth-field textarea { color: var(--text); }

.spinner-overlay { background: rgba(15, 18, 32, 0.9); }
.spinner-overlay-content { color: var(--text); }

/* .muted in style.css is plain blue, which is unreadable on the dark theme */
.muted { color: #fff; }

/* style.css hard-codes black text in selects, which vanishes on the dark panel */
select { color: #fff; }
select option { background: var(--panel); color: #fff; }