:root{
  /* slate-cyan accent system (overridable by Tweaks) */
  --accent: #155e75;
  --accent-hover: #114c5f;
  --accent-press: #0d3d4d;
  --accent-tint: #e7f1f4;
  --accent-tint-2: #d2e6ec;
  --accent-ink: #0c3743;

  /* cool neutrals */
  --bg: #f3f6f7;
  --surface: #ffffff;
  --surface-2: #fafcfc;
  --surface-sunken: #f0f4f5;
  --border: #e3eaec;
  --border-strong: #cfdadd;
  --text: #15252b;
  --text-2: #54666d;
  --text-3: #8a999f;

  /* semantic */
  --success: #2c7a55;
  --success-tint: #e7f3ec;
  --success-ink: #1c5238;
  --warn: #b06a13;
  --warn-tint: #fbf0df;
  --danger: #b1453b;
  --danger-tint: #fbeceb;
  --danger-ink: #7d2f28;

  /* radii */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(16,40,48,.06), 0 1px 1px rgba(16,40,48,.04);
  --sh-md: 0 4px 14px rgba(16,40,48,.07), 0 1px 3px rgba(16,40,48,.05);
  --sh-lg: 0 18px 48px rgba(16,40,48,.16), 0 4px 12px rgba(16,40,48,.08);
  --sh-focus: 0 0 0 3px var(--accent-tint-2);

  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root, #app-root{ height:100%; }
button{ font-family: inherit; }
input, select, textarea{ font-family: inherit; }

::selection{ background: var(--accent-tint-2); }

/* numerals */
.tnum{ font-variant-numeric: tabular-nums; }
.display{ font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* scrollbars */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background: #cdd8db; border-radius:999px; border:3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#b6c4c8; background-clip: padding-box; }
*::-webkit-scrollbar-track{ background: transparent; }

@keyframes spin{ to{ transform: rotate(360deg);} }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes logIn{ from{ transform: translateY(5px);} to{ transform:none;} }
@keyframes fadeUp{ from{ transform: translateY(10px);} to{ transform:none;} }
@keyframes barFlow{ 0%{ background-position: 0 0;} 100%{ background-position: 36px 0;} }
.fadeUp{ animation: fadeUp .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes bootfill{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }
@keyframes radarPing{ 0%{ transform: scale(.6); opacity:.7;} 70%,100%{ transform: scale(1.5); opacity:0;} }