/*
 * Alex Running - Design System CSS Variables
 * This stylesheet defines global CSS variables for standardizing UI/UX components.
 */

:root {
    /* Colors */
    --color-primary: #007bff; /* Blue */
    --color-secondary: #6c757d; /* Gray */
    --color-accent: #28a745; /* Green for success/accent */
    --color-text-dark: #212529; /* Dark text */
    --color-text-light: #f8f9fa; /* Light text */
    --color-background-light: #ffffff; /* White background */
    --color-background-dark: #343a40; /* Dark background */
    --color-border: #dee2e6; /* Light gray border */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    /* Typography */
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-heading: 'Roboto', sans-serif;
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --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;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;

    /* Box Shadow */
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Transitions */
    --transition-speed-fast: 0.15s;
    --transition-speed-normal: 0.3s;
    --transition-ease: ease-in-out;
}