:root {
  --color-primary-base: #0097A7;
  --color-primary-hover: #00838F;
  --color-secondary-base: #37474F;
  --color-success: #28A745;
  --color-error: #DC3545;
  --color-warning: #FFC107;
  --color-info: #17A2B8;
  --surface-app: #F8F9FA;
  --surface-main: #FFFFFF;
  --text-main: #212529;
  --text-muted: #868E96;
  --border-subtle: #DEE2E6;
  --state-focus-ring: 0 0 0 3px rgba(0, 151, 167, 0.3);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}