/* ==================== CSS VARIABLES ==================== */
:root {
    /*Colors*/
    --color-blue: #2CA1E4;
    --color-green: #36d5a5;
    --color-success: #36d5a5;
    --color-success-semi-transparent: #36d5a530;
    --color-yellow: #f1cb20;
    --color-warning: #f1cb20;
    --color-alteration: #e47c22;
    --color-red: #d53636;
    --color-danger: #d53636;
    --color-danger-semi-transparent: #d5363630;
    --color-gray: #999;
    --color-gray-dark: #2e2e2e;
    --color-white: #fff;
    --color-black: #000;
    --color-info-toast-background: #F4F8F9;
    --color-success-toast-background: #D6F1E9;
    --color-danger-toast-background: #ECD5D5;
    /*Spacing*/
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    /*Sizing*/
    --sidebar-width: 250px;
    --top-nav-height: 100px;
    --mobile-tabbar-base-height: 48px;
    --mobile-tabbar-scale: 1.8;
    --mobile-tabbar-height: calc(var(--mobile-tabbar-base-height) * var(--mobile-tabbar-scale));
    --header-height: 60px;
    /*Border Radius*/
    --radius: 10px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    /*Shadows*/
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /*Typography*/
    /*--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/
    --font-family: 'Nunito', 'Segoe UI', Roboto, sans-serif;
    --font-size-px: 14px;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.45rem;
    --font-size-3xl: 1.7rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /*Transitions*/
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    /*Breakpoints (defined for reference)*/
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    /*Gradient*/
    --bg-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

/* ==================== DARK MODE ==================== */
@media (prefers-color-scheme: dark) {
    :root {
         /*Colors - Dark Mode*/ 
        --color-white: #fff;
        --color-black: #000;
        --color-info-toast-background: #F4F8F9;
        --color-success-toast-background: #2B4253;
        --color-danger-toast-background: #41263F;
         /*Shadows - Dark Mode (more subtle)*/ 
        --shadow-sm: 0 1px 2px 0 rgba(68, 55, 55, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    }
}