:root {
  /* Primary — sampled from UI KIT colors (500–900) + generated tints */
  --vimet-color-primary-50: #e9f1fc;
  --vimet-color-primary-100: #d3e3f9;
  --vimet-color-primary-200: #a7c7f3;
  --vimet-color-primary-300: #7babed;
  --vimet-color-primary-400: #4f8fe7;
  --vimet-color-primary-500: #2470dd;
  --vimet-color-primary-600: #135ebf;
  --vimet-color-primary-700: #1151a2;
  --vimet-color-primary-800: #103c70;
  --vimet-color-primary-900: #122b45;

  /* Secondary — cool slate scale from UI KIT */
  --vimet-color-secondary-50: #f4f6f8;
  --vimet-color-secondary-100: #e8ebef;
  --vimet-color-secondary-200: #d1d7de;
  --vimet-color-secondary-300: #b8c1cb;
  --vimet-color-secondary-400: #a9b3be;
  --vimet-color-secondary-500: #9ba7b3;
  --vimet-color-secondary-600: #8d9ba8;
  --vimet-color-secondary-700: #7a8997;
  --vimet-color-secondary-800: #586b79;
  --vimet-color-secondary-900: #334755;

  /* Accent */
  --vimet-color-accent-orange-500: #f48833;
  --vimet-color-accent-cyan-500: #40bece;

  /* Neutral — labeled hexes from UI KIT */
  --vimet-color-white: #ffffff;
  --vimet-color-neutral-50: #f8f9fa;
  --vimet-color-neutral-100: #f1f3f5;
  --vimet-color-neutral-200: #e5e7eb;
  --vimet-color-neutral-300: #d1d5db;
  --vimet-color-neutral-400: #9ca3af;
  --vimet-color-neutral-500: #6b7280;
  --vimet-color-neutral-600: #4b5563;
  --vimet-color-neutral-700: #374151;
  --vimet-color-neutral-800: #1f2937;
  --vimet-color-neutral-900: #111827;

  /* Semantic */
  --vimet-color-success-50: #e9f7f1;
  --vimet-color-success-100: #c7ebdb;
  --vimet-color-success-500: #23a473;
  --vimet-color-success-600: #1c8a60;
  --vimet-color-success-700: #166b4b;

  --vimet-color-warning-50: #fef8e9;
  --vimet-color-warning-100: #fcecc0;
  --vimet-color-warning-500: #f0b434;
  --vimet-color-warning-600: #d99a1c;
  --vimet-color-warning-700: #b07a12;

  --vimet-color-error-50: #fceeee;
  --vimet-color-error-100: #f6d0cf;
  --vimet-color-error-500: #cf4b48;
  --vimet-color-error-600: #b53c3a;
  --vimet-color-error-700: #94302e;

  --vimet-color-info-50: #ebf3fe;
  --vimet-color-info-100: #cfe2fd;
  --vimet-color-info-500: #428ff6;
  --vimet-color-info-600: #2f78dd;
  --vimet-color-info-700: #245fb3;

  /* Surfaces */
  --vimet-color-surface-background: #f5f7fa;
  --vimet-color-surface-default: #ffffff;
  --vimet-color-surface-1: #ffffff;
  --vimet-color-surface-2: #fbfafc;
  --vimet-color-surface-3: #f1f5f9;
  --vimet-color-surface-subtle: var(--vimet-color-surface-2);
  --vimet-color-surface-muted: var(--vimet-color-surface-3);
  --vimet-color-surface-overlay: rgba(17, 24, 39, 0.45);

  /* Interactive states */
  --vimet-color-state-hover: #f4f4f4;
  --vimet-color-state-pressed: #c1c7ce;
  --vimet-color-state-focus: #eff4fa;
  --vimet-color-state-selected: #dde7f5;
  --vimet-color-state-disabled: #efeff0;

  /* Text */
  --vimet-color-text-primary: var(--vimet-color-neutral-900);
  --vimet-color-text-secondary: var(--vimet-color-neutral-600);
  --vimet-color-text-muted: var(--vimet-color-neutral-500);
  --vimet-color-text-inverse: var(--vimet-color-white);
  --vimet-color-text-link: var(--vimet-color-primary-600);

  /* Borders */
  --vimet-color-border-default: #e5e7eb;
  --vimet-color-border-strong: var(--vimet-color-neutral-300);
  --vimet-color-border-focus: var(--vimet-color-primary-500);

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

  /* Radius */
  --vimet-radius-sm: 4px;
  --vimet-radius-md: 6px;
  --vimet-radius-lg: 8px;
  --vimet-radius-xl: 12px;
  --vimet-radius-full: 9999px;

  /* Typography */
  --vimet-font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --vimet-font-weight-regular: 400;
  --vimet-font-weight-medium: 500;
  --vimet-font-weight-semibold: 600;
  --vimet-font-weight-bold: 700;

  --vimet-font-size-display: 32px;
  --vimet-line-height-display: 44px;
  --vimet-font-size-h1: 28px;
  --vimet-line-height-h1: 36px;
  --vimet-font-size-h2: 24px;
  --vimet-line-height-h2: 32px;
  --vimet-font-size-h3: 20px;
  --vimet-line-height-h3: 28px;
  --vimet-font-size-h4: 16px;
  --vimet-line-height-h4: 24px;
  --vimet-font-size-body-lg: 16px;
  --vimet-line-height-body-lg: 24px;
  --vimet-font-size-body: 14px;
  --vimet-line-height-body: 20px;
  --vimet-font-size-body-sm: 12px;
  --vimet-line-height-body-sm: 16px;
  --vimet-font-size-caption: 10px;
  --vimet-line-height-caption: 14px;

  /* Form typography — from UI KIT Inputs */
  --vimet-type-section-size: 18px;
  --vimet-type-section-line: 24px;
  --vimet-type-section-weight: var(--vimet-font-weight-bold);
  --vimet-type-section-color: var(--vimet-color-primary-500);

  --vimet-type-label-size: var(--vimet-font-size-body);
  --vimet-type-label-line: var(--vimet-line-height-body);
  --vimet-type-label-weight: var(--vimet-font-weight-semibold);
  --vimet-type-label-color: var(--vimet-color-neutral-900);

  --vimet-type-control-size: var(--vimet-font-size-body);
  --vimet-type-control-line: var(--vimet-line-height-body);
  --vimet-type-control-weight: var(--vimet-font-weight-regular);
  --vimet-type-control-color: var(--vimet-color-neutral-900);

  --vimet-type-placeholder-color: var(--vimet-color-neutral-400);

  --vimet-type-unit-size: var(--vimet-font-size-body);
  --vimet-type-unit-weight: var(--vimet-font-weight-regular);
  --vimet-type-unit-color: var(--vimet-color-neutral-600);

  --vimet-type-helper-size: var(--vimet-font-size-body-sm);
  --vimet-type-helper-line: var(--vimet-line-height-body-sm);
  --vimet-type-helper-weight: var(--vimet-font-weight-regular);
  --vimet-type-helper-color: var(--vimet-color-neutral-400);

  --vimet-type-link-color: var(--vimet-color-primary-600);
  --vimet-type-link-weight: var(--vimet-font-weight-semibold);

  /* Effects */
  --vimet-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --vimet-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --vimet-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
  --vimet-focus-ring: 0 0 0 3px rgba(36, 112, 221, 0.35);

  /* Control sizes */
  --vimet-control-height-sm: 32px;
  --vimet-control-height-md: 40px;
  --vimet-control-height-lg: 48px;
  --vimet-z-overlay: 1000;
  --vimet-z-modal: 1100;
  --vimet-z-tooltip: 1200;
}