/* Fuergy brand palette + light/dark theme variables.
 *
 * Included by every user-facing template (login, picker, mfa-enroll,
 * mfa-challenge, password-setup) so each one stops re-declaring the
 * same 6 brand colors and dark-mode overrides in its inline <style>.
 *
 * Templates can still add page-specific variables (e.g. --admin-link-bg
 * for the picker, --mesh-* for login's animated background) — those
 * stay inline. Only colors that don't change between pages live here.
 *
 * Dark mode is triggered by either explicit `data-theme="dark"` on
 * <html> (the user clicked the toggle, lang cookie carries the choice)
 * or `prefers-color-scheme: dark` when no explicit choice was made.
 * Both rules below match the same variables; the explicit form wins
 * because [data-theme="dark"] is loaded after :root:not([data-theme]).
 */

:root {
  /* Brand colors */
  --fuergy-blue: #2674ff;
  --fuergy-blue-light: #5b96ff;
  --fuergy-blue-deep: #0a3da8;
  --fuergy-coral: #ff7371;
  --fuergy-amber: #ffb547;
  --danger: #d93025;

  /* Light theme — text + structure */
  --text-dark: #1a1f2e;
  --text-muted: #5f6b80;
  --border: #e3e8f0;
  --surface: #fafbfd;
  --card-bg: white;
  --bg-base: #f5f7fb;
  --code-bg: #f5f7fb;
}

/* Dark theme: applied when (a) user has no explicit data-theme AND the
 * OS prefers dark, OR (b) user explicitly picked dark. The :root:not()
 * form lets the explicit data-theme attribute win even on a dark-OS
 * machine. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text-dark: #e6ebf5;
    --text-muted: #8a96b0;
    --border: #2d3a52;
    --surface: #0f1623;
    --card-bg: #1a2235;
    --bg-base: #0f1623;
    --code-bg: #232d44;
    --danger: #f87171;
  }
}

[data-theme="dark"] {
  --text-dark: #e6ebf5;
  --text-muted: #8a96b0;
  --border: #2d3a52;
  --surface: #0f1623;
  --card-bg: #1a2235;
  --bg-base: #0f1623;
  --code-bg: #232d44;
  --danger: #f87171;
}
