/* Shared design tokens + theme switch (used by index.html and login.html) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg:           #f3f5f9;
  --surface:      #ffffff;
  --surface-2:    #f7f8fb;
  --surface-3:    #eceff5;
  --line:         #dfe4ee;
  --line-strong:  #c9d1e0;
  --ink:          #111a2e;
  --ink-2:        #3b475f;
  --muted:        #66728b;
  --faint:        #98a2b6;

  --primary:      #1d3a8f;
  --primary-hover:#162d72;
  --primary-ink:  #ffffff;
  --primary-soft: #e7ecfa;
  --ring:         rgba(29, 58, 143, .28);

  --brass:        #a9781c;
  --brass-soft:   #f8efd9;

  --ok:           #0f7a4f;
  --ok-soft:      #e1f4ea;
  --bad:          #b4233f;
  --bad-soft:     #fbe6ea;

  --shadow-1: 0 1px 2px rgba(17, 26, 46, .06);
  --shadow-2: 0 8px 28px rgba(17, 26, 46, .10);
  --scrim:    rgba(17, 26, 46, .40);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #0a1020;
  --surface:      #111a2f;
  --surface-2:    #16213a;
  --surface-3:    #1d2a47;
  --line:         #25324f;
  --line-strong:  #34456a;
  --ink:          #e9eef9;
  --ink-2:        #c3cde2;
  --muted:        #8d9bb6;
  --faint:        #5f6e8c;

  --primary:      #7fa3ff;
  --primary-hover:#a1bcff;
  --primary-ink:  #0a1020;
  --primary-soft: #1a2a52;
  --ring:         rgba(127, 163, 255, .35);

  --brass:        #e2b457;
  --brass-soft:   #2e2610;

  --ok:           #4fd69b;
  --ok-soft:      #0f2e24;
  --bad:          #ff7d94;
  --bad-soft:     #34151d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 36px rgba(0, 0, 0, .55);
  --scrim:    rgba(2, 5, 12, .62);
}

:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: 160ms cubic-bezier(.2, .7, .2, 1);
}

/* Smooth cross-fade only when the user toggles (class added by theme.js is not needed:
   transitions on color props are cheap and stay subtle). */
body, .surface, .field, .btn, .theme-switch { transition: background-color var(--ease), border-color var(--ease), color var(--ease); }

/* ---------- Theme switch (segmented, 3-way) ---------- */
.theme-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme-switch button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-checked="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-1);
}
.theme-switch button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-switch svg { width: 16px; height: 16px; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}