:root {
  color-scheme: light;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --sidebar-width: 220px;
  --bar-height: 52px;
  --filter-bar-height: 40px;
  --control-height: 28px;
  --row-height: 32px;
  --edge: 16px;
  --radius-control: 6px;
  --radius-field: 7px;
  --radius-menu: 10px;

  --color-background: #ffffff;
  --color-sidebar: #f5f5f7;
  --color-chrome: #ffffff;
  --color-menu: rgba(255, 255, 255, .96);
  --color-table-header: rgba(255, 255, 255, .88);

  --color-label: rgba(0, 0, 0, .85);
  --color-label-secondary: rgba(60, 60, 67, .6);
  --color-label-tertiary: rgba(60, 60, 67, .36);
  --color-label-quaternary: rgba(60, 60, 67, .2);

  --color-separator: rgba(60, 60, 67, .14);
  --color-separator-light: rgba(60, 60, 67, .08);
  --color-hover: rgba(0, 0, 0, .04);
  --color-fill: rgba(118, 118, 128, .12);
  --color-selection: rgba(0, 0, 0, .07);

  --color-accent: #007aff;
  --color-accent-tint: rgba(0, 122, 255, .1);
  --color-on-accent: #ffffff;

  --color-row: #ffffff;
  --color-row-hover: #f5f5f7;
  --color-row-highlight: #f4f9ff;
  --color-row-highlight-hover: #eaf3ff;

  --color-positive: #248a3d;
  --color-negative: #d70015;
  --color-warning: #c93400;
  --color-status-pass: #34c759;
  --color-status-noisy: #ffcc00;

  --color-engine-pie: #007aff;
  --color-engine-llamacpp: #ff9500;
  --color-engine-mlxlm: #af52de;
  --color-engine-splash: #30b0c7;
  --color-engine-vllm: #ff2d55;
  --color-engine-sglang: #34c759;
  --color-engine-default: #a3a3a3;

  --color-card: #f5f5f7;

  --color-panel-outline: rgba(60, 60, 67, .18);
  --color-bar-other: #aeaeb2;
  --color-lollipop-other: #8e8e93;

  /* gradients along the rings: a lighter step of the same hue into the full one */
  --color-ring-start: #4aa8ff;
  --color-heat-ahead-start: #34c759;
  --color-heat-behind-start: #ff5e57;
  --color-ring-decode: #28b24b;
  --color-ring-prefill-start: #6fe3e8;
  --color-ring-prefill: #00a7c2;


  --shadow-menu: 0 0 0 .5px rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .12);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #1e1e1e;
  --color-sidebar: #282828;
  --color-chrome: #323232;
  --color-menu: rgba(44, 44, 46, .92);
  --color-table-header: rgba(30, 30, 30, .88);

  --color-label: rgba(255, 255, 255, .85);
  --color-label-secondary: rgba(255, 255, 255, .55);
  --color-label-tertiary: rgba(255, 255, 255, .28);
  --color-label-quaternary: rgba(255, 255, 255, .16);

  --color-separator: rgba(0, 0, 0, .45);
  --color-separator-light: rgba(255, 255, 255, .06);
  --color-hover: rgba(255, 255, 255, .05);
  --color-fill: rgba(118, 118, 128, .24);
  --color-selection: rgba(255, 255, 255, .1);

  --color-accent: #0a84ff;
  --color-accent-tint: rgba(10, 132, 255, .18);

  --color-row: #1e1e1e;
  --color-row-hover: #262626;
  --color-row-highlight: #1f2632;
  --color-row-highlight-hover: #243042;

  --color-positive: #30d158;
  --color-negative: #ff453a;
  --color-warning: #ff9f0a;
  --color-status-pass: #30d158;
  --color-status-noisy: #ffd60a;

  --color-engine-pie: #0a84ff;
  --color-engine-llamacpp: #ff9f0a;
  --color-engine-mlxlm: #bf5af2;
  --color-engine-splash: #40c8e0;
  --color-engine-vllm: #ff375f;
  --color-engine-sglang: #30d158;

  --color-card: #2a2a2c;

  --color-panel-outline: rgba(255, 255, 255, .14);
  --color-bar-other: #7c7c80;
  --color-lollipop-other: #8e8e93;

  --color-ring-start: #5ac8fa;
  --color-heat-ahead-start: #63e68a;
  --color-heat-behind-start: #ff7b72;
  --color-ring-decode: #30d158;
  --color-ring-prefill-start: #7af0f2;
  --color-ring-prefill: #3ac8e0;

  --shadow-menu: 0 0 0 .5px rgba(255, 255, 255, .12), 0 12px 36px rgba(0, 0, 0, .5);
}

/* phones and iPads in portrait: the page edge clears a landscape notch, rows grow toward a finger's 44 points */
@media (max-width: 899px) {
  :root {
    --edge: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --filter-bar-height: 48px;
    --row-height: 40px;
  }
}