:root {
  color-scheme: dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);

  --background: #282828;
  --dot: #696969;
  --surface: #1d1d1f;
  --label: #f5f5f7;
  --secondary-label: #a1a1a6;
  --tertiary-label: #86868b;
  --separator: rgba(255, 255, 255, 0.12);
  --fill: rgba(255, 255, 255, 0.08);
  --fill-selected: rgba(255, 255, 255, 0.2);
  --fill-pressed: rgba(255, 255, 255, 0.1);
  --accent: #0a84ff;
  --on-accent: #ffffff;
  --on-accent-secondary: rgba(255, 255, 255, 0.82);
  --on-accent-fill: rgba(255, 255, 255, 0.24);

  --grid: 25px;
  --bar-height: 56px;
  --control-radius: 8px;
  --icon-size: 44px;
  --row-padding: 10px;
  --list-inset: 10px;
  --icon-radius: calc(var(--icon-size) * 0.225);
  --result-radius: calc(var(--icon-radius) + var(--row-padding));
  --panel-radius: calc(var(--result-radius) + var(--list-inset));
  --content-inset: calc(var(--list-inset) + var(--row-padding));
}

@media (max-width: 600px) {
  :root {
    --icon-size: 42px;
    --list-inset: 8px;
  }
}