:root {
  --c-bg: #FFFFFF;
  --c-surface: #F4F4F4;
  --c-heading: #171A20;
  --c-body: #393C41;
  --c-tertiary: #5C5E62;
  --c-placeholder: #8E8E8E;
  --c-hairline: #EEEEEE;
  --c-border: #D0D1D2;

  --c-accent: #3E6AE1;
  --c-accent-hover: #3559C4;

  --ball-bg: #F4F4F4;
  --ball-fg: #171A20;
  --ball-bonus-bg: #3E6AE1;
  --ball-bonus-fg: #FFFFFF;

  --ms-red: #C8102E;
  --ms-blue: #005EB8;
  --ms-green: #007A33;

  --tier1: #B04A5A;
  --tier2: #5A6AC0;
  --tier3: #3E8E7E;
  --pill-special-bg: #F6EFE3;
  --pill-special-fg: #7A5A22;
  --pill-cons-bg: #F4F4F4;
  --pill-cons-fg: #5C5E62;

  --radius-btn: 4px;
  --radius-card: 12px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
          "PingFang TC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --t: 0.33s cubic-bezier(0.5, 0, 0, 0.75);
}