:root {
     // Colors in HSL format
    --color-primary-h: 210;  // Hue
    --color-primary-s: 32%;  // Saturation
    --color-primary-l: 48%;  // Lightness
    --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-light: #f8f9fa;
    --color-dark: #343a40;

    // Typography
    --font-size-base: 1rem;      // 16px
    --font-size-sm: 0.875rem;    // 14px
    --font-size-lg: 1.125rem;    // 18px
    --font-size-xl: 1.25rem;     // 20px
    --font-size-xxl: 1.5rem;     // 24px
    --line-height-base: 1.5;

    // Spacing
    --spacing-xs: 0.25rem;  // 4px
    --spacing-sm: 0.5rem;   // 8px
    --spacing-md: 1rem;     // 16px
    --spacing-lg: 1.5rem;   // 24px
    --spacing-xl: 2rem;     // 32px

    // Border radius
    --border-radius-sm: 0.25rem;  // 4px
    --border-radius-md: 0.375rem; // 6px
    --border-radius-lg: 0.5rem;   // 8px

    // Breakpoints
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}