/* Light and dark colours for the app's sign-in screens and onboarding (the dashboard has its own in dashboard.css).
   Values match dznir.com/hq. <html data-theme="light|dark|system"> comes from App\Support\ThemePreference. */
:root { --shadow: rgba(17, 17, 16, 0.18); --ring: rgba(17, 17, 16, 0.06); --on-ink: #FFFFFF; }
:root[data-theme="dark"] {
  --paper: #111110; --paper-2: #2B1A12; --card: #1B1A18; --ink: #F3F1EC; --ink-2: #D4D0C8; --muted: #A39E95;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16); --accent: #FF5A2E; --accent-ink: #FF8A63;
  --ok: #6BD69A; --ok-bg: #12301F; --err: #FF8F80; --err-bg: #3A1714; --warn-bg: #3A2E0F; --warn: #F2C75C;
  --on-ink: #111110; --ring: rgba(255, 255, 255, 0.1); --shadow: rgba(0, 0, 0, 0.6); --brand-text: 45%; --brand-icon: 60%; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --paper: #111110; --paper-2: #2B1A12; --card: #1B1A18; --ink: #F3F1EC; --ink-2: #D4D0C8; --muted: #A39E95;
    --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16); --accent: #FF5A2E; --accent-ink: #FF8A63;
    --ok: #6BD69A; --ok-bg: #12301F; --err: #FF8F80; --err-bg: #3A1714; --warn-bg: #3A2E0F; --warn: #F2C75C;
    --on-ink: #111110; --ring: rgba(255, 255, 255, 0.1); --shadow: rgba(0, 0, 0, 0.6); --brand-text: 45%; --brand-icon: 60%; color-scheme: dark;
  }
}


/* Light / dark switch (partials/theme-switch): identical to the theme button in the dashboard and HQ headers
   (.icon-btn in dashboard.css / admin.css): 40px circle, no border, page-colour fill. Moon in light, sun in dark. */
.theme-switch, .top__help { display: grid; text-decoration: none; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.theme-switch:hover, .top__help:hover { background: var(--paper-2); color: var(--ink); }
.theme-switch svg, .top__help svg { width: 18px; height: 18px; }
.theme-switch__to-light { display: none; }
:root[data-theme="dark"] .theme-switch__to-light { display: contents; }
:root[data-theme="dark"] .theme-switch__to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .theme-switch__to-light { display: contents; }
  :root[data-theme="system"] .theme-switch__to-dark { display: none; }
}
.auth-page > .theme-switch { position: fixed; top: 16px; right: 16px; z-index: 2; }
.top__end { display: flex; align-items: center; gap: 8px; }