:root {
  /* Backgrounds */
  --bg-0: #0a0c10;
  --bg-1: #10131a;
  --bg-2: #161a23;
  --stroke: #242b3a;
  --stroke-soft: #1c2230;

  /* Text */
  --text-0: #f2f5fb;
  --text-1: #c7cede;
  --text-2: #8b93a7;

  /* Accents */
  --accent: #6ea8ff;
  --mint: #7cf3d1;
  --pos: #55e0a0;
  --warn: #ffcf70;
  --neg: #ff7a7a;
  --exact: #8affc9;

  /* Market tints */
  --m-ebay: #6ea8ff;
  --m-poshmark: #ff7ea8;
  --m-mercari: #ff9d5c;
  --m-etsy: #ff8c5a;
  --m-grailed: #d7dbe2;
  --m-depop: #ff6b6b;
  --m-offerup: #7cf3d1;
  --m-facebook: #5aa1ff;
  --m-web: #8b93a7;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;

  /* Radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-full: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,.40);
  --shadow-3: 0 16px 48px rgba(0,0,0,.55);
  --glow-accent: 0 0 0 1px rgba(110,168,255,.25), 0 8px 32px rgba(110,168,255,.18);
  --glow-mint: 0 0 0 1px rgba(124,243,209,.35), 0 8px 40px rgba(124,243,209,.22);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;

  /* Glass */
  --glass-bg: rgba(22,26,35,.72);
  --glass-blur: blur(18px) saturate(140%);
  --hairline: inset 0 1px 0 rgba(255,255,255,.06);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .16s;
  --dur-med: .28s;
  --dur-slow: .5s;
}

/* Score-ring animatable property */
@property --pct {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}