:root {
  --bg: #0F141B;
  --bg-2: #151C26;
  --bg-3: #1B2431;
  --bg-hover: #202B3A;
  --line: #26313F;
  --line-soft: #1D2733;
  --txt: #E8EEF6;
  --txt-dim: #93A3B8;
  --txt-faint: #64768C;
  --tally: #FF4438;
  --tally-soft: rgba(255, 68, 56, .14);
  --link: #8FB4FF;
  --new: #37D9A6;
  --star: #F2A93B;
  --scrim: rgba(15, 20, 27, .72);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);

  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 10px;
  --r-sm: 6px;
  --pad: clamp(16px, 3vw, 34px);
  --topbar: 58px;
  --tabbar-h: 58px;
}

html[data-theme="light"] {
  --bg: #EDF1F5;
  --bg-2: #FFFFFF;
  --bg-3: #F4F7FA;
  --bg-hover: #E7EDF4;
  --line: #D5DEE8;
  --line-soft: #E3EAF1;
  --txt: #101821;
  --txt-dim: #56677B;
  --txt-faint: #8496AB;
  --tally: #DA2418;
  --tally-soft: rgba(218, 36, 24, .10);
  --link: #2C5BD6;
  --new: #0E9C77;
  --star: #C8830F;
  --scrim: rgba(255, 255, 255, .78);
  --shadow: 0 16px 34px -26px rgba(16, 24, 33, .55);
}