// Gray scale
$gray-50: #f9f9f9;
$gray-100: #f0f0f1;
$gray-200: #e0e0e0;
$gray-300: #c3c4c7;
$gray-400: #999;
$gray-500: #888;
$gray-700: #333;
$gray-800: #1e1e1e;

// Semantic: surfaces
$color-surface-muted: $gray-50;
$color-surface-alt: $gray-100;

// Semantic: borders
$color-border: $gray-200;
$color-border-strong: $gray-300;

// Semantic: text
$color-text-muted: $gray-400;
$color-text-meta: $gray-500;
$color-text-primary: #1d2327;
$color-text-secondary: #646970;

// Semantic: UI elements
$color-element-dark: $gray-700;
$color-icon-dark: $gray-800;

// Spacing
$spacing-xs: 5px;
$spacing-sm: 10px;
$spacing-md: 15px;
$spacing-lg: 20px;
$spacing-xl: 30px;

// Container
$container-max-width: 900px;
$container-max-width-wide: 1050px;

// Shadows
$shadow-header: 0 8px 24px -8px rgba(0, 0, 0, 0.08);

// Font sizes
$font-size-small: 12px;
$font-size-body: 14px;
$font-size-heading: 16px;
$font-size-tabs: 16px;

// Z-index
$z-index-help-button: 3;
$z-index-header: 10;
$z-index-snackbar: 9999;

// breakpoints
$breakpoint-mobile: 783px;
$breakpoint-mobile-max: calc(#{$breakpoint-mobile} - 0.1px);
