:root {
  /* Основні кольори */
  --color-background: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-light: #f7f9fc;
  --color-surface-hover: #eef4ff;

  /* Текст */
  --color-text: #172033;
  --color-text-secondary: #4d5b73;
  --color-text-muted: #738096;

  /* Брендові кольори */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eaf1ff;

  /* Статуси */
  --color-success: #15803d;
  --color-success-light: #ecfdf3;

  --color-danger: #dc2626;
  --color-danger-light: #fef2f2;

  --color-warning: #b45309;
  --color-warning-light: #fff7ed;

  /* Межі */
  --color-border: #dce3ee;
  --color-border-strong: #c5cfdd;

  /* Розміри */
  --container-width: 1160px;

  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 22px;

  /* Тіні */
  --shadow-small:
    0 2px 8px rgba(27, 42, 74, 0.06);

  --shadow-card:
    0 12px 32px rgba(27, 42, 74, 0.08);

  --shadow-focus:
    0 0 0 4px rgba(37, 99, 235, 0.14);
}