:root {
  --hg-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --hg-font-size-11: 11px;
  --hg-font-size-12: 12px;
  --hg-font-size-13: 13px;
  --hg-font-size-14: 14px;
  --hg-font-size-16: 16px;
  --hg-font-size-18: 18px;
  --hg-font-size-20: 20px;
  --hg-font-size-24: 24px;
  --hg-font-size-28: 28px;
  --hg-font-size-36: 36px;

  --hg-line-height-tight: 1.05;
  --hg-line-height-base: 1.35;
  --hg-line-height-relaxed: 1.5;

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

  --hg-space-4: 4px;
  --hg-space-6: 6px;
  --hg-space-8: 8px;
  --hg-space-10: 10px;
  --hg-space-12: 12px;
  --hg-space-14: 14px;
  --hg-space-16: 16px;
  --hg-space-18: 18px;
  --hg-space-20: 20px;
  --hg-space-22: 22px;
  --hg-space-24: 24px;
  --hg-space-28: 28px;
  --hg-space-32: 32px;
  --hg-space-36: 36px;
  --hg-space-40: 40px;

  --hg-radius-8: 8px;
  --hg-radius-10: 10px;
  --hg-radius-12: 12px;
  --hg-radius-14: 14px;
  --hg-radius-16: 16px;
  --hg-radius-18: 18px;
  --hg-radius-pill: 999px;

  --hg-shadow-card: 0 8px 18px rgba(37, 53, 74, 0.10), 0 2px 5px rgba(37, 53, 74, 0.06);
  --hg-shadow-card-hover: 0 10px 22px rgba(37, 53, 74, 0.12), 0 3px 6px rgba(37, 53, 74, 0.08);
  --hg-shadow-focus: 0 0 0 3px rgba(52, 123, 182, 0.18);

  --hg-z-base: 1;
  --hg-z-sidebar: 20;
  --hg-z-topbar: 30;

  --hg-sidebar-width: 276px;
  --hg-topbar-height: 68px;
  --hg-page-max-width: 1640px;
  --hg-page-padding-x: 16px;
  --hg-page-padding-y: 16px;
  --hg-grid-gap: 24px;

  --hg-color-bg-app: #f1f3f6;
  --hg-color-bg-surface: #ffffff;
  --hg-color-bg-sidebar: #0b3d5c;
  --hg-color-bg-sidebar-active: rgba(76, 110, 138, 0.72);
  --hg-color-bg-muted: #f5f7fa;

  --hg-color-border: #d5dde6;
  --hg-color-border-soft: #dde5ec;
  --hg-color-border-strong: #c8d0d9;

  --hg-color-text: #5f6873;
  --hg-color-text-strong: #3f4753;
  --hg-color-text-soft: #7c838d;
  --hg-color-text-inverse: #f7fbff;
  --hg-color-text-sidebar: rgba(244, 249, 253, 0.96);
  --hg-color-text-sidebar-soft: rgba(213, 226, 236, 0.90);

  --hg-color-brand-700: #0d486f;
  --hg-color-brand-600: #175577;
  --hg-color-brand-500: #2f6f98;
  --hg-color-brand-400: #628eb6;
  --hg-color-brand-300: #96b2cf;
  --hg-color-brand-200: #d7e0ea;

  --hg-color-teal-500: #24b2b0;
  --hg-color-gold-500: #d79a20;
  --hg-color-purple-500: #6d5bd4;
  --hg-color-red-500: #e42b2b;
  --hg-color-red-100: #f8dfdf;
  --hg-color-green-500: #27a749;
  --hg-color-green-100: #d5efdf;
  --hg-color-gray-500: #9aa7b2;

  --hg-color-card-border: #dfe6ed;
  --hg-color-card-divider: #d8e0e8;
  --hg-color-card-footer: #7e8690;

  --hg-color-avatar-bg: #edf2f6;
  --hg-color-avatar-border: #cbd6e0;

  --hg-color-control-primary: #3578ad;
  --hg-color-control-primary-hover: #2f6f98;
  --hg-color-control-primary-inactive: #3578ad;
  --hg-color-control-text: #f7fbff;
  --hg-color-control-neutral-bg: #ffffff;
  --hg-color-control-neutral-hover: #fbfdff;
  --hg-color-control-neutral-border: #cfd7df;
  --hg-color-control-neutral-border-strong: #929daa;
  --hg-color-control-neutral-border-active: #727f8c;
  --hg-color-control-neutral-muted: #f7f8fa;

  --hg-color-table-text: #707781;
  --hg-color-table-meta: #6f7782;
  --hg-color-table-row-alt: #f2f5f8;

  --hg-color-chart-axis: #4a5462;
  --hg-color-chart-label: #4f5865;
  --hg-color-chart-label-strong: #434d5b;
  --hg-color-chart-area-fill: rgba(126, 158, 186, 0.46);
  --hg-color-chart-line: #2f6f98;
  --hg-color-chart-bar: #6c93b7;

  --hg-viz-blue-700: #0d4b73;
  --hg-viz-blue-600: #2f6f98;
  --hg-viz-blue-500: #628eb6;
  --hg-viz-blue-400: #86aac9;
  --hg-viz-blue-300: #b3cadf;
  --hg-viz-teal-500: #24afaa;
  --hg-viz-gold-500: #dd9800;
  --hg-viz-purple-500: #6d5bd4;
  --hg-viz-gray-500: #444c59;
  --hg-viz-red-500: #e22b2a;
  --hg-viz-red-100: #e9c3c5;
  --hg-viz-track: #e8edf2;

  --hg-card-padding: 24px;
  --hg-icon-size-sm: 14px;
  --hg-icon-size-md: 16px;
  --hg-icon-size-lg: 18px;
}