@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --font-family-sans: "Inter", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  --font-family-mono: Consolas, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;

  --font-size-display: 18px;
  --font-size-title: 15px;
  --font-size-subheading: 13px;
  --font-size-stat: 16px;
  --font-size-body: 12px;
  --font-size-label: 11px;
  --font-size-caption: 10px;
  --font-size-mono: 11px;
  --font-size-mono-small: 10px;

  --line-height-display: 24px;
  --line-height-title: 20px;
  --line-height-subheading: 18px;
  --line-height-stat: 20px;
  --line-height-body: 17px;
  --line-height-label: 15px;
  --line-height-caption: 14px;
  --line-height-mono: 16px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-display: -0.005em;
  --letter-spacing-title: 0;
  --letter-spacing-subheading: 0;
  --letter-spacing-stat: 0.01em;
  --letter-spacing-body: 0;
  --letter-spacing-label: 0;
  --letter-spacing-metadata: 0;
  --letter-spacing-mono: 0;

  --color-white: #ffffff;
  --color-black: #0b0f11;
  --color-ink-strong: #10171b;
  --color-ink: #26313a;
  --color-ink-soft: #414e57;
  --color-slate: #5b6a74;
  --color-muted: #78868f;
  --color-disabled: #9caab3;

  --color-workspace: #d7dde1;
  --color-surface: #ffffff;
  --color-surface-inset: #ffffff;
  --color-surface-raised: #f4f7f8;
  --color-surface-subtle: #eef2f4;
  --color-surface-sunken: #e8edf0;
  --color-surface-highlight: #ffffff;
  --color-surface-hover: #e7edf0;
  --color-surface-active: #d9e1e5;

  --color-chrome: #2b343a;
  --color-chrome-raised: #3a454c;
  --color-chrome-sunken: #1f272b;
  --color-chrome-hover: #414d55;
  --color-chrome-edge: #12181b;
  --color-chrome-divider: #55636b;
  --color-chrome-text: #dbe3e8;
  --color-chrome-text-strong: #f6f9fa;
  --color-chrome-text-muted: #97a5ae;
  --color-chrome-wash: rgba(20, 119, 111, 0.16);
  --color-chrome-wash-strong: rgba(20, 119, 111, 0.28);

  --color-border: #a8b5bd;
  --color-border-subtle: #cbd4da;
  --color-border-strong: #78868f;
  --color-divider: #c1cbd1;
  --color-gridline: #dce3e8;

  --color-teal: #078f91;
  --color-teal-hover: #0ca8a8;
  --color-teal-pressed: #067275;
  --color-teal-deep: #064f54;
  --color-teal-muted: #4c9695;
  --color-teal-line: #8fc7c3;
  --color-teal-tint: #dceeed;

  --color-success: #1e7443;
  --color-success-strong: #26914f;
  --color-success-line: #a6ccb4;
  --color-success-tint: #e2f1e7;
  --color-info: #1d5c92;
  --color-info-strong: #2873b0;
  --color-info-line: #a8c3da;
  --color-info-tint: #e2ecf5;
  --color-warning: #96670f;
  --color-warning-strong: #bd8619;
  --color-warning-line: #d8bf8a;
  --color-warning-tint: #f6edd8;
  --color-danger: #9f2f2e;
  --color-danger-strong: #c04240;
  --color-danger-line: #d6a8a7;
  --color-danger-tint: #f7e4e3;

  --color-background: var(--color-workspace);
  --color-text: var(--color-ink);
  --color-text-strong: var(--color-ink-strong);
  --color-text-secondary: var(--color-slate);
  --color-text-muted: var(--color-muted);
  --color-text-disabled: var(--color-disabled);

  --color-action-primary: var(--color-teal);
  --color-action-primary-hover: var(--color-teal-hover);
  --color-action-primary-pressed: var(--color-teal-pressed);
  --color-action-primary-text: var(--color-white);
  --color-brand: var(--color-teal);
  --color-brand-strong: var(--color-teal-deep);
  --color-focus-ring: var(--color-teal-hover);

  --color-selection: var(--color-teal);
  --color-selection-hover: var(--color-teal-pressed);
  --color-selection-text: var(--color-white);
  --color-selection-tint: var(--color-teal-tint);

  --color-titlebar-background: var(--color-chrome);
  --color-menubar-background: var(--color-chrome-sunken);
  --color-toolbar-background: var(--color-surface-raised);
  --color-statusbar-background: var(--color-chrome);
  --color-sidebar-background: var(--color-surface);

  --color-panel-background: var(--color-surface);
  --color-panel-header: var(--color-surface-sunken);
  --color-panel-footer: var(--color-surface-raised);

  --color-table-header: var(--color-surface-sunken);
  --color-table-row: var(--color-surface);
  --color-table-row-alt: #f7f9fa;
  --color-table-row-hover: var(--color-teal-tint);
  --color-table-row-selected: var(--color-selection);

  --color-console-background: #f7f9fa;
  --color-console-text: var(--color-ink);
  --color-console-muted: var(--color-muted);
  --color-console-prompt: var(--color-teal);
  --color-console-gutter: var(--color-surface-sunken);
  --color-console-rule: var(--color-gridline);

  --color-image-backdrop: #1f272b;
  --color-image-scrim: rgba(11, 15, 17, 0.22);

  --color-connection-online: var(--color-success-strong);
  --color-connection-degraded: var(--color-warning-strong);
  --color-connection-offline: var(--color-danger-strong);
  --color-connection-idle: var(--color-disabled);
  --color-data-positive: var(--color-success);
  --color-data-negative: var(--color-danger);
  --color-data-neutral: var(--color-slate);

  --chart-1: #14776f;
  --chart-2: #2b6f9e;
  --chart-3: #96670f;
  --chart-4: #6b5f93;
  --chart-5: #3d7a4b;
  --chart-6: #9f4a46;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-control: 2px;
  --radius-card: 2px;
  --radius-panel: 0;
  --radius-round: 999px;

  --border-width: 1px;
  --border-control: var(--border-width) solid var(--color-border-strong);
  --border-panel: var(--border-width) solid var(--color-border);
  --border-subtle: var(--border-width) solid var(--color-border-subtle);
  --border-grid: var(--border-width) solid var(--color-gridline);
  --border-chrome: var(--border-width) solid var(--color-chrome-edge);

  --shadow-card: none;
  --shadow-panel: none;
  --shadow-lift: 0 2px 0 rgba(26, 36, 37, 0.12);
  --shadow-lift-strong: 0 2px 0 rgba(26, 36, 37, 0.18);
  --shadow-menu: 0 4px 12px rgba(11, 15, 17, 0.28);
  --shadow-dialog: 0 12px 36px rgba(11, 15, 17, 0.34);
  --shadow-focus: 0 0 0 1px var(--color-focus-ring);

  --height-titlebar: 32px;
  --height-appbar: 42px;
  --height-menubar: 24px;
  --height-toolbar: 30px;
  --height-control: 26px;
  --height-control-compact: 22px;
  --height-control-comfortable: 34px;
  --height-action-prominent: 36px;
  --height-nav-row: 24px;
  --height-tab: 28px;
  --height-table-header: 26px;
  --height-table-row: 26px;
  --height-statusbar: 24px;
  --width-sidebar: 224px;
  --width-inspector: 300px;
  --width-splitter: 4px;
  --width-rule: 1px;

  --motion-fast: 60ms;
  --motion-standard: 90ms;
  --motion-slow: 140ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}
