:root {
  /* Typography */
  --font-sans: Roboto, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Core colors */
  --sr-page: #f4f7f9;
  --sr-surface: #ffffff;
  --sr-surface-muted: #edf3f5;
  --sr-surface-selected: #eef8f6;
  --sr-border: #d5e0e6;
  --sr-border-strong: #b8c9d2;

  --sr-text: #10243a;
  --sr-text-secondary: #63758a;
  --sr-text-muted: #8392a3;
  --sr-text-inverse: #f3f8fa;

  --sr-sidebar: #0b1f32;
  --sr-sidebar-deep: #071827;
  --sr-sidebar-hover: #162f44;
  --sr-sidebar-active: #1f3c50;
  --sr-sidebar-muted: #8db0c1;

  --sr-primary: #0b887d;
  --sr-primary-hover: #08756c;
  --sr-primary-active: #075f58;
  --sr-primary-soft: #e5f5f2;

  --sr-success: #219a68;
  --sr-success-soft: #e9f7f0;
  --sr-warning: #e99a17;
  --sr-warning-soft: #fff4e4;
  --sr-danger: #df4b52;
  --sr-danger-soft: #fdecee;
  --sr-info: #3b82f6;
  --sr-info-soft: #eaf2ff;
  --sr-violet: #805ad5;
  --sr-violet-soft: #f2ecff;

  /* Layout */
  --sr-sidebar-width: 240px;
  --sr-topbar-height: 64px;
  --sr-inspector-width: 380px;
  --sr-content-max: 1880px;
  --sr-desktop-min-width: 1360px;
  --sr-table-row: 60px;
  --sr-control-height: 40px;

  /* Spacing */
  --sr-space-1: 4px;
  --sr-space-2: 8px;
  --sr-space-3: 12px;
  --sr-space-4: 16px;
  --sr-space-5: 20px;
  --sr-space-6: 24px;
  --sr-space-8: 32px;
  --sr-space-10: 40px;

  /* Radius */
  --sr-radius-sm: 8px;
  --sr-radius-md: 12px;
  --sr-radius-lg: 16px;
  --sr-radius-pill: 999px;

  /* Shadows */
  --sr-shadow-card: 0 1px 2px rgba(15, 35, 52, 0.06),
    0 8px 24px rgba(15, 35, 52, 0.04);
  --sr-shadow-inspector: -8px 0 24px rgba(15, 35, 52, 0.08);

  /* Motion */
  --sr-ease: cubic-bezier(0.2, 0, 0, 1);
  --sr-duration-fast: 120ms;
  --sr-duration-normal: 180ms;
}

html,
body {
  font-family: var(--font-sans);
  color: var(--sr-text);
  background: var(--sr-page);
}

.sr-focusable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sr-primary) 30%, transparent);
  outline-offset: 2px;
}