:root {
  --color-bg: #f4f6f8;
  --color-bg-elevated: #ffffff;
  --color-bg-elevated-2: #eef1f4;
  --color-border: #dfe3e8;
  --color-border-hover: #c8cfd6;
  --color-text: #14181c;
  --color-text-muted: #5b646e;
  --color-text-faint: #868f99; /* 4.5:1+ on --color-bg-elevated — safe for normal text */

  --color-accent: #1f5fa8;          /* links, focus rings, active nav */
  --color-accent-hover: #17497f;
  --color-accent-solid: #1f5fa8;    /* solid button fill — white text hits 5.3:1 */
  --color-accent-tint: #e9f0f9;     /* active-state background (nav, tabs) */
  --color-accent-contrast: #ffffff;

  --color-success: #1c6b46;
  --color-success-bg: #e6f3ec;
  --color-warning: #8a5406;
  --color-warning-bg: #fbf1e0;
  --color-danger: #b3222e;
  --color-danger-bg: #fceceb;

  --color-ink: #14181c;             /* the near-black used for the login rail, print rules */

  --font-body: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;   /* headings, stat values, dollar amounts */
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; /* VIN/HIN, tabular numbers, part numbers */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-md: 0 4px 16px rgba(20, 24, 28, 0.12);
}

/* Dark mode — opt-in per user via the account theme toggle (Settings > Reminders & appearance).
   v1.1.0 flips the old default: light is now the base experience, dark is the toggle. */
:root[data-theme="dark"] {
  --color-bg: #14181d;
  --color-bg-elevated: #1c222a;
  --color-bg-elevated-2: #252d37;
  --color-border: #2d3642;
  --color-border-hover: #3a4553;
  --color-text: #e9ecf1;
  --color-text-muted: #aab3c0;
  --color-text-faint: #7a8492;

  --color-accent: #6aa3de;
  --color-accent-hover: #8fb9e6;
  --color-accent-solid: #3f7cc2;
  --color-accent-tint: #1c2a3b;
  --color-accent-contrast: #ffffff;

  --color-success: #3ecf8e;
  --color-success-bg: #10261c;
  --color-warning: #e8b64a;
  --color-warning-bg: #2b2312;
  --color-danger: #e5636f;
  --color-danger-bg: #2b1417;

  --color-ink: #0b0d10;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
}