:root {
  --hdf-color-primary: #22c55e;
  --hdf-color-primary-dark: #16a34a;
  --hdf-color-primary-light: #64d68e;
  --hdf-color-primary-hover: #f8faf9;
  --hdf-color-primary-selected: #e5faef;

  --hdf-color-dark: #333333;
  --hdf-color-dark-light: #4a4a4a;
  --hdf-color-error: #dc2626;
  --hdf-color-error-bg: #fef2f2;
  --hdf-color-info: #2196f3;
  --hdf-color-accent: #fbbf24;
  --hdf-color-accent-dark: #d97706;

  --hdf-color-surface: #ffffff;
  --hdf-color-bg: #f0f2f6;
  --hdf-color-bg-light: #f8faf9;

  --hdf-text-primary: #212121;
  --hdf-text-secondary: #666666;
  --hdf-text-muted: #64748b;

  --hdf-border-color: #d1d5db;
  --hdf-border-light: #e5e7eb;
  --hdf-border-hover: #1b9447;

  --hdf-radius: 12px;
  --hdf-radius-sm: 8px;
  --hdf-radius-xs: 6px;

  --hdf-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --hdf-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --hdf-shadow-hover: 0 14px 30px rgba(15, 23, 42, 0.12);
}