/* Ente Theme Variables based on web/packages/base/components/utils/theme.ts */
:root {
    /* Light theme colors */
    --ente-color-accent-photos: #1db954;
    --ente-color-accent-auth: #9610d6;
    --ente-color-accent-locker: #5ba8ff;
    
    /* Background colors */
    --ente-background-default: #fff;
    --ente-background-paper: #fff;
    --ente-background-paper2: #fbfbfb;
    --ente-background-search: #f3f3f3;
    
    /* Text colors */
    --ente-text-base: #000;
    --ente-text-muted: rgba(0, 0, 0, 0.60);
    --ente-text-faint: rgba(0, 0, 0, 0.50);
    
    /* Fill colors */
    --ente-fill-base: #000;
    --ente-fill-muted: rgba(0, 0, 0, 0.12);
    --ente-fill-faint: rgba(0, 0, 0, 0.04);
    --ente-fill-faint-hover: rgba(0, 0, 0, 0.08);
    --ente-fill-fainter: rgba(0, 0, 0, 0.02);
    
    /* Stroke colors */
    --ente-stroke-base: #000;
    --ente-stroke-muted: rgba(0, 0, 0, 0.24);
    --ente-stroke-faint: rgba(0, 0, 0, 0.12);
    --ente-stroke-fainter: rgba(0, 0, 0, 0.06);
    
    /* Shadow */
    --ente-shadow-paper: 0px 0px 10px rgba(0, 0, 0, 0.25);
    --ente-shadow-menu: 0px 0px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.12);
    --ente-shadow-button: 0px 4px 4px rgba(0, 0, 0, 0.25);
    
    /* Fixed colors */
    --ente-success: #1db954;
    --ente-warning: #ffc107;
    --ente-danger: #ea3f3f;
    --ente-danger-dark: #f53434;
    --ente-danger-light: #ff6565;
    
    /* Secondary colors */
    --ente-secondary-main: #f5f5f5;
    --ente-secondary-hover: #e9e9e9;
    
    /* Action colors */
    --ente-action-hover: rgba(0, 0, 0, 0.08);
    --ente-action-disabled: rgba(0, 0, 0, 0.50);
    
    /* Typography */
    --ente-font-family: "Inter Variable", sans-serif;
    --ente-font-weight-regular: 500;
    --ente-font-weight-medium: 600;
    --ente-font-weight-bold: 700;
    
    /* Border radius */
    --ente-border-radius: 8px;
    --ente-border-radius-small: 4px;
    
    /* Spacing */
    --ente-spacing-xs: 4px;
    --ente-spacing-sm: 8px;
    --ente-spacing-md: 12px;
    --ente-spacing-lg: 16px;
    --ente-spacing-xl: 24px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background colors */
        --ente-background-default: #000;
        --ente-background-paper: #1b1b1b;
        --ente-background-paper2: #252525;
        --ente-background-search: #1b1b1b;
        
        /* Text colors */
        --ente-text-base: #fff;
        --ente-text-muted: rgba(255, 255, 255, 0.70);
        --ente-text-faint: rgba(255, 255, 255, 0.50);
        
        /* Fill colors */
        --ente-fill-base: #fff;
        --ente-fill-muted: rgba(255, 255, 255, 0.16);
        --ente-fill-faint: rgba(255, 255, 255, 0.12);
        --ente-fill-faint-hover: rgba(255, 255, 255, 0.16);
        --ente-fill-fainter: rgba(255, 255, 255, 0.05);
        
        /* Stroke colors */
        --ente-stroke-base: #fff;
        --ente-stroke-muted: rgba(255, 255, 255, 0.24);
        --ente-stroke-faint: rgba(255, 255, 255, 0.16);
        --ente-stroke-fainter: rgba(255, 255, 255, 0.12);
        
        /* Shadow */
        --ente-shadow-paper: 0px 2px 12px rgba(0, 0, 0, 0.75);
        --ente-shadow-menu: 0px 0px 6px rgba(0, 0, 0, 0.50), 0px 3px 6px rgba(0, 0, 0, 0.25);
        --ente-shadow-button: 0px 4px 4px rgba(0, 0, 0, 0.75);
        
        /* Secondary colors */
        --ente-secondary-main: #2b2b2b;
        --ente-secondary-hover: #373737;
        
        /* Action colors */
        --ente-action-hover: rgba(255, 255, 255, 0.16);
        --ente-action-disabled: rgba(255, 255, 255, 0.50);
    }
}