:root {
  color-scheme: light;

  /* Typography */
  --font-family-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-title: 28px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;

  /* Color */
  --color-text: #17212b;
  --color-text-muted: #6c7885;
  --color-border: #e5e9ed;
  --color-surface: #ffffff;
  --color-canvas: #f4f7f9;
  --color-primary: #2589d8;
  --color-primary-hover: #1475bd;
  --color-primary-soft: #e9f4fc;
  --color-success: #21835a;
  --color-success-strong: #28a66e;
  --color-success-soft: #eaf7f1;
  --color-success-surface: #ebf8f1;
  --color-success-border: #b9e2cf;
  --color-danger: #a53a32;
  --color-danger-strong: #cf4c43;
  --color-danger-soft: #fff0ef;
  --color-danger-hover: #fbe2df;
  --color-neutral-soft: #f0f3f5;
  --color-neutral-text: #53616d;
  --color-row-hover: #f9fbfc;
  --color-row-selected: #f4f9fd;
  --color-field-readonly: #f5f7f8;
  --color-field-subtle: #f8fafb;
  --color-disabled-surface: #f7f8f9;
  --color-white: #ffffff;
  --color-sidebar: #17212b;
  --color-sidebar-text: #b5c0ca;
  --color-sidebar-text-muted: #8fa0ad;
  --color-sidebar-caption: #91a0ae;
  --color-sidebar-hover: #202e39;
  --color-sidebar-active: #253441;
  --color-sidebar-border: #2c3b47;
  --color-sidebar-panel-border: #334552;
  --color-sidebar-accent: #54afea;
  --color-avatar-start: #62b9ef;
  --color-avatar-end: #277fc0;
  --color-brand-start: #48a9ea;
  --color-brand-end: #2082ce;
  --color-icon-muted: #a6b0b9;
  --color-status-neutral: #aab3ba;
  --color-primary-soft-hover: #ddecf8;

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

  /* Controls and layout */
  --control-height-compact: 29px;
  --control-height: 34px;
  --control-height-tabs: 36px;
  --table-row-height: 56px;
  --sidebar-width: 240px;
  --content-max-width: 1280px;
  --dialog-width: 520px;
  --dialog-width-wide: 920px;

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-control: 8px;
  --radius-field: 9px;
  --radius-card: 10px;
  --radius-brand: 12px;
  --radius-dialog: 14px;
  --radius-feature: 16px;
  --radius-pill: 20px;

  /* Effects and layers */
  --shadow-dialog: 0 18px 48px rgba(35, 55, 72, .12);
  --shadow-primary: 0 5px 14px rgba(37, 137, 216, .22);
  --focus-ring: 0 0 0 3px var(--color-primary-soft);
  --backdrop-color: rgba(19, 31, 41, .48);
  --layer-base: 0;
  --layer-dropdown: 100;
  --layer-dialog: 1000;
  --layer-notification: 1100;
}