/* TrueScore — design tokens (mirrors the Figma system) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:root {
  --font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* light */
  --bg: #F3F1EC;
  --sidebar: rgba(255,255,255,.62);
  --card: rgba(255,255,255,.74);
  --card-solid: #FFFFFF;
  --surface2: #F6F5F2;
  --surface3: #EDEBE6;
  --ink: #0E0E10;
  --text: #4B4B53;
  --muted: #80808A;
  --faint: #B5B5BD;
  --accent: #15803D;
  --accent-strong: #15803D;
  --on-accent: #FFFFFF;
  --accent-soft: #E8F5EC;
  --danger: #C2410C;
  --danger-soft: #FDECE4;
  --warn: #B45309;
  --warn-soft: #FDF3E2;
  --neutral-soft: #F6F5F2;
  --border: rgba(14,14,16,.10);
  --border-strong: rgba(14,14,16,.16);
  --card-border: rgba(255,255,255,.9);
  --input-bg: #FFFFFF;
  --input-border: #D9D7D1;
  --track: #E6E4DF;
  --btn-fill: #0E0E10;
  --btn-text: #FFFFFF;
  --nav-active: #F3F1EC;
  --shadow: 0 6px 20px rgba(14,14,16,.05);
  --shadow-pop: 0 10px 28px rgba(14,14,16,.12);
  --dot: rgba(14,14,16,.26);
  --blob-mint: rgba(92,224,161,.30);
  --blob-sky: rgba(142,197,255,.28);
  --blob-peach: rgba(255,200,160,.26);
  --chart-grid: #E6E4DF;
  --tooltip-bg: rgba(255,255,255,.94);
  --scrim: rgba(14,14,16,.42);
}

[data-theme="dark"] {
  --bg: #0E0E10;
  --sidebar: rgba(255,255,255,.035);
  --card: rgba(255,255,255,.055);
  --card-solid: #17171A;
  --surface2: #1B1B1E;
  --surface3: #222226;
  --ink: #ECECEC;
  --text: #A6A6A6;
  --muted: #7A7A82;
  --faint: #55555C;
  --accent: #5CE0A1;
  --accent-strong: #5CE0A1;
  --on-accent: #0B1F15;
  --accent-soft: rgba(92,224,161,.14);
  --danger: #F0705A;
  --danger-soft: rgba(240,112,90,.14);
  --warn: #E0A84A;
  --warn-soft: rgba(224,168,74,.14);
  --neutral-soft: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --card-border: rgba(255,255,255,.10);
  --input-bg: #0B0B0C;
  --input-border: rgba(255,255,255,.12);
  --track: #2A2A2F;
  --btn-fill: #FFFFFF;
  --btn-text: #0E0E10;
  --nav-active: #1B1B1E;
  --shadow: none;
  --shadow-pop: 0 14px 34px rgba(0,0,0,.5);
  --dot: rgba(255,255,255,.32);
  --blob-mint: rgba(92,224,161,.14);
  --blob-sky: rgba(111,168,255,.10);
  --blob-peach: rgba(92,224,161,.07);
  --chart-grid: #26262B;
  --tooltip-bg: rgba(30,30,33,.94);
  --scrim: rgba(0,0,0,.55);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--on-accent); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ambient blobs */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); }
.blob.mint  { width: 900px; height: 560px; right: -220px; top: -220px; background: var(--blob-mint); }
.blob.sky   { width: 780px; height: 520px; left: -160px; bottom: -200px; background: var(--blob-sky); }
.blob.peach { width: 620px; height: 420px; left: 40%; top: 52%; background: var(--blob-peach); }

/* type helpers */
.h-display { font-size: 32px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.h-title   { font-size: 22px; line-height: 1.28; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.h-card    { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.t-body    { font-size: 14px; color: var(--text); }
.t-small   { font-size: 12px; color: var(--muted); }
.t-micro   { font-size: 11px; color: var(--muted); }
.mono-num  { font-variant-numeric: tabular-nums; }

.u-hidden { display: none !important; }
.u-ink { color: var(--ink); }
.u-muted { color: var(--muted); }
.u-accent { color: var(--accent); }
.u-danger { color: var(--danger); }
.u-right { text-align: right; }
.u-grow { flex: 1 1 auto; min-width: 0; }