/* lifeGPS theme palettes — semantic app-* colors + brand color.
   Pages set data-theme="dark"|"light" on <html>; the toggle in theme.js
   persists the choice in localStorage. The brand color can be overridden by
   a later <style> block (user's saved color scheme). */
:root { color-scheme: dark; }

[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: 2 6 23;          /* slate-950 */
  --app-card: 15 23 42;      /* slate-900 */
  --app-card2: 30 41 59;     /* slate-800 */
  --app-border: 148 163 184; /* slate-400 */
  --app-strong: 255 255 255;
  --app-text: 226 232 240;   /* slate-200 */
  --app-muted: 148 163 184;  /* slate-400 */
  --app-faint: 100 116 139;  /* slate-500 */
}

[data-theme="light"] {
  color-scheme: light;
  --app-bg: 248 250 252;     /* slate-50 */
  --app-card: 255 255 255;
  --app-card2: 241 245 249;  /* slate-100 */
  --app-border: 203 213 225; /* slate-300 */
  --app-strong: 15 23 42;
  --app-text: 30 41 59;
  --app-muted: 71 85 105;
  --app-faint: 100 116 139;
}

/* Default brand palette (emerald) — overridden per user when logged in. */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --brand-50: 236 253 245;
  --brand-100: 209 250 229;
  --brand-500: 16 185 129;
  --brand-600: 5 150 105;
  --brand-700: 4 120 87;
}