/* dashboard-ui tokens (23 Oct 2026). Copy into the project. Change --accent only; every other colour is neutral or status. */
:root {
  --accent: #2F6BFF;            /* ONE accent: active nav, primary button, one chart series, one filled hero tile */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, white);
  --bg: #F3F4F2;
  --surface: #FFFFFF;
  --surface-dark: #111214;      /* the filled hero KPI tile, active nav pill, primary button */
  --text: #111214;
  --text-muted: #6B7076;
  --line: #E6E8EB;
  --ok: #22C55E;  --ok-soft: #DCFCE7;
  --warn: #F59E0B; --warn-soft: #FEF3C7;
  --bad: #EF4444;  --bad-soft: #FEE2E2;
  --info-soft: #DCE7FB;         /* the one soft-blue tile */

  --r-card: 20px; --r-ctl: 12px; --r-pill: 999px;
  --gap: 16px; --pad: 22px;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .04);
  --glow-ok: 0 0 0 1px var(--ok), 0 0 30px rgb(34 197 94 / .35);

  --font: "Inter", "SF Pro Text", system-ui, sans-serif;
  --fs-label: 13px; --fs-body: 14px; --fs-kpi: 28px; --fs-title: 30px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

:root[data-theme="dark"] {      /* accent stays the same in dark */
  --bg: #0C0D0F; --surface: #17181B; --surface-dark: #FFFFFF;
  --text: #F2F3F5; --text-muted: #9097A0; --line: #26282C;
  --shadow: 0 1px 0 rgb(255 255 255 / .04) inset;
}

/* glass, only over a photo or gradient */
.glass { background: rgb(255 255 255 / .07); backdrop-filter: blur(20px); border: 1px solid rgb(255 255 255 / .12); border-radius: 22px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skeleton { background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 50%, white) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 10px; }
@keyframes sk { to { background-position: -200% 0; } }

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