/* Every colour, type size, radius and spacing value in the inbox. Colours come from the BenchApp app's theme. */

:root {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --text-xs: 11px;
  --leading-xs: 16px;
  --text-sm: 12px;
  --leading-sm: 16px;
  --text-base: 13px;
  --leading-base: 20px;
  --text-md: 14px;
  --leading-md: 20px;
  --text-lg: 16px;
  --leading-lg: 24px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-lg: -0.01em;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-row: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  --radius-control: 4px;
  --radius-float: 8px;
  --radius-round: 999px;

  --size-sidebar: 200px;
  --size-list: 320px;
  --size-thread-min: 480px;
  --size-context: 280px;
  --size-list-head: 44px;
  --size-thread-head: 52px;
  --size-row: 60px;
  --size-control: 28px;
  --size-segment: 24px;
  --size-view: 28px;
  --size-chip: 20px;
  --size-count: 16px;
  --size-avatar: 24px;
  --size-avatar-sm: 20px;
  --size-dot: 6px;
  --size-bar: 2px;
  --size-icon: 16px;
  --size-icon-sm: 14px;
  --size-empty-icon: 24px;
  --size-menu: 220px;
  --size-popover: 320px;
  --size-overlay: 440px;
  --size-signin: 320px;
  --size-label: 84px;
  --size-shot: 180px;
  --measure: 72ch;
  --composer-min: 60px;
  --composer-max: 240px;

  --hairline: 1px;
  --ring: 2px;
  --ring-offset: 1px;
  --underline-offset: 2px;
  --float-gap: 4px;

  --duration: 120ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --surface-0: #f2f2f7;
  --surface-1: #f7f7fa;
  --surface-2: #ffffff;
  --surface-3: #e5e5ea;
  --surface-3-hover: #e5e5ea80;
  --menu-hover: #0000000f;
  --border: #00000014;
  --border-strong: #00000024;
  --text-primary: #1c1c1e;
  --text-secondary: #3c3c43e0;
  --text-muted: #3c3c43b9;
  --accent: #0071e3;
  --on-accent: #ffffff;
  --waiting: #8f5100;
  --waiting-fill: #ff9500;
  --on-waiting: #1c1c1e;
  --waiting-bg: #ff95001a;
  --waiting-border: #ff95004d;
  --resolved: #1f7a36;
  --resolved-bg: #34c7591a;
  --danger: #c1121f;
  --danger-bg: #ff3b301a;
  --focus: #1c1c1e66;
  --shadow-float: 0 8px 24px #0000001f, 0 0 0 1px #00000014;
  --scrim: #0000004d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #101011;
    --surface-1: #17181a;
    --surface-2: #1c1c1e;
    --surface-3: #2c2c2e;
    --surface-3-hover: #2c2c2e80;
    --menu-hover: #ffffff14;
    --border: #ffffff14;
    --border-strong: #ffffff24;
    --text-primary: #ebebf5;
    --text-secondary: #ebebf5b3;
    --text-muted: #ebebf585;
    --waiting: #ff9f0a;
    --waiting-fill: #ff9f0a;
    --waiting-bg: #ff9f0a1a;
    --waiting-border: #ff9f0a4d;
    --resolved: #32d74b;
    --resolved-bg: #32d74b1a;
    --danger: #ff6961;
    --danger-bg: #ff453a1a;
    --focus: #ebebf566;
    --shadow-float: 0 8px 24px #00000080, 0 0 0 1px #ffffff14;
    --scrim: #00000080;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #101011;
  --surface-1: #17181a;
  --surface-2: #1c1c1e;
  --surface-3: #2c2c2e;
  --surface-3-hover: #2c2c2e80;
  --menu-hover: #ffffff14;
  --border: #ffffff14;
  --border-strong: #ffffff24;
  --text-primary: #ebebf5;
  --text-secondary: #ebebf5b3;
  --text-muted: #ebebf585;
  --waiting: #ff9f0a;
  --waiting-fill: #ff9f0a;
  --waiting-bg: #ff9f0a1a;
  --waiting-border: #ff9f0a4d;
  --resolved: #32d74b;
  --resolved-bg: #32d74b1a;
  --danger: #ff6961;
  --danger-bg: #ff453a1a;
  --focus: #ebebf566;
  --shadow-float: 0 8px 24px #00000080, 0 0 0 1px #ffffff14;
  --scrim: #00000080;
}