:root {
    /* Color palette */
    --primary-color: #00ab55;
    --primary-light: rgba(0, 171, 85, 0.1);
    --primary-dark: #007b55;
    
    --secondary-color: #3366ff;
    --secondary-light: rgba(51, 102, 255, 0.1);
    --secondary-dark: #1939b7;
    
    --info-color: #00b8d9;
    --info-light: rgba(0, 184, 217, 0.1);
    --info-dark: #006c9c;
    
    --success-color: #36b37e;
    --success-light: rgba(54, 179, 126, 0.1);
    --success-dark: #1b806a;
    
    --warning-color: #ffab00;
    --warning-light: rgba(255, 171, 0, 0.1);
    --warning-dark: #b76e00;
    
    --error-color: #ff5630;
    --error-light: rgba(255, 86, 48, 0.1);
    --error-dark: #b71d18;
    
    /* Text colors */
    --text-primary: #212b36;
    --text-secondary: #637381;
    --text-disabled: #919eab;
    
    /* Background colors */
    --bg-default: #f5f7fb;
    --bg-paper: #ffffff;
    --bg-neutral: #f4f6f8;
    
    /* Border colors */
    --border-color: #e6eaef;
    --divider-color: #f4f6f8;
    
    /* UI elements */
    --border-radius: 8px;
    --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 8px 16px rgba(0, 0, 0, 0.12);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Side nav */
    --sidebar-bg: #212b36;
    --sidebar-color: #919eab;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 88px;
    
    /* Top header */
    --header-height: 4rem;
}

/* Dark mode theme (for future) */
[data-theme="dark"] {
    --primary-color: #5BE584;
    --primary-light: rgba(91, 229, 132, 0.2);
    --primary-dark: #007B55;
    
    /* Text colors in dark mode */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-disabled: #64748b;
    
    /* Background colors in dark mode */
    --bg-default: #161c24;
    --bg-paper: #212b36;
    --bg-neutral: #333c48;
    
    /* Border colors in dark mode */
    --border-color: #2f3a47;
    --divider-color: #2f3a47;
}