/* ============================================================================
   CSS Variables - Centralized Design Tokens
   All CSS custom properties in one place for consistency
   ============================================================================ */

:root {
    /* Primary Colors */
    --bg-primary: #2c6bd0;
    --bg-primary-rgb: 44, 107, 208;
    --bg-primaryDark: #245074;
    --bg-primaryDark-rgb: 36, 80, 116;
    --bg-primaryLight: #4390ce;
    --bg-primaryLight-rgb: 67, 144, 206;
    
    /* Background Colors */
    --bg-sidebar: #f6f7fd;
    --bg-sidebar-rgb: 246, 247, 253;
    
    /* Typography - Font Sizes */
    --font-size-xlarge: 1.5rem;      /* 24px - Large headings */
    --font-size-large: 1.1rem;       /* 17.6px - Section headers */
    --font-size-base: 1rem;          /* 16px - Body text */
    --font-size-medium: 0.9rem;      /* 14.4px - Medium text */
    --font-size-small: 0.875rem;     /* 14px - Small text */
    --font-size-xsmall: 0.8rem;      /* 12.8px - Extra small text */
    --font-size-xxsmall: 0.75rem;    /* 12px - Labels */
    --font-size-tiny: 0.65rem;       /* 10.4px - Tiny text */
    
    /* Transitions */
    --transition-standard: all 0.3s ease;
    --transition-fast: all 0.2s ease;
}

/* ============================================================================
   Mobile Responsive Font Sizes (max-width: 768px)
   ============================================================================ */
@media (max-width: 768px) {
    :root {
        --font-size-large: 1rem;
        --font-size-medium: 0.875rem;
        --font-size-small: 0.8rem;
        --font-size-xsmall: 0.75rem;
        --font-size-xxsmall: 0.7rem;
        --font-size-tiny: 0.65rem;
    }
}

/* ============================================================================
   Extra Small Mobile Font Sizes (max-width: 576px)
   ============================================================================ */
@media (max-width: 576px) {
    :root {
        --font-size-large: 0.95rem;
        --font-size-medium: 0.85rem;
        --font-size-small: 0.8rem;
        --font-size-xsmall: 0.75rem;
        --font-size-xxsmall: 0.7rem;
        --font-size-tiny: 0.65rem;
    }
}