:root {
  --color-bg: #080a0d;
  --color-surface: #0f1216;
  --color-surface-translucent: rgb(15 18 22 / 60%);
  --color-surface-sunken: #090c10;
  --color-surface-hover: #1d232c;
  --color-border: #2a313b;
  --color-control-border: var(--color-border);
  --color-outline: #6b7482;
  --color-text: #e7eaef;
  --color-text-muted: #9aa4b2;
  --color-text-disabled: #5b6270;
  --color-accent: #3ecf8e;
  --color-accent-soft: #0e2419;
  --color-accent-contrast: #0f1216;
  --color-accent-fill: #0f6840;
  --color-brand: #1baf7a;
  --color-negative: #f2857d;
  --color-negative-soft: #2e1917;
  --color-warning: #e8b04b;
  --color-warning-soft: #2b2113;
  --color-incoming: #1baf7a;
  --color-incoming-soft: #0b2318;
  --color-incoming-fill: #419e6a;
  --color-outgoing: #eda100;
  --color-backdrop: rgb(0 0 0 / 40%);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --border-width: 1px;

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 45%);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 8%), 0 8px 32px rgb(0 0 0 / 55%);

  --duration-state: 120ms;
  --duration-enter: 200ms;
  --duration-leave: 150ms;
  --duration-pulse: 1.2s;
  --duration-stagger: 40ms;

  --delay-intent: 250ms;

  --easing-state: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-enter: cubic-bezier(0.2, 0, 0, 1);
  --easing-leave: cubic-bezier(0.4, 0, 1, 1);

  --scale-recessed: 0.97;
  --scale-behind: 0.94;
  --translate-recessed: 2px;

  --font-sans: system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace;
  --font-brand: "Knip Wordmark", var(--font-sans);

  --font-size-caption: 0.8125rem;
  --font-size-label: 0.875rem;
  --font-size-ui: 0.9375rem;
  --font-size-body: 1rem;
  --font-size-heading-3: 1.0625rem;
  --font-size-heading-2: 1.25rem;
  --font-size-heading-1: 1.5rem;
  --font-size-display: 1.75rem;

  --font-weight-regular: 400;
  --font-weight-bold: 500;
  --font-weight-thick: 600;

  --line-height-heading: 1.25;
  --line-height-label: 1.25;
  --line-height-ui: 1.4;
  --line-height-body: 1.55;

  --letter-spacing-wide: 0.03em;

  --z-behind: -1;
  --z-sticky: 1;
  --z-popover: 2;
  --z-notification: 3;
  --z-skip-link: 100;

  --touch-target-min: 2.75rem;
  --control-block-size: 2.25rem;
  --control-block-size-compact: 2rem;
  --control-padding-inline: var(--space-sm);
  --control-indicator-size: 1.2rem;
  --control-indicator-border-width: 2px;

  --icon-size-xs: 0.75em;
  --icon-size-sm: 1em;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-stroke-width-light: 1.7;
  --icon-stroke-width-regular: 2;
  --icon-stroke-width-bold: 4;

  --sidebar-width: 14rem;
  --topbar-height: 3.5rem;
  --navbar-height: 4rem;
  --content-width: 64rem;
  --sheet-inline-size: 30rem;
}

@media (pointer: coarse) {
  :root {
    --control-block-size: var(--touch-target-min);
    --control-block-size-compact: var(--touch-target-min);
  }
}