/* ===== ROOT CSS VARIABLES - TADREAMK SURVEILLANCE THEME ===== */

:root {
    /* ===== PRIMARY COLORS ===== */
    --primary-color: #8b7fb8;              /* Main brand purple */
    --primary-hover: #6d5ea3;              /* Darker purple for hover states */
    --primary-light: #a49bcc;              /* Lighter purple variant */
    --primary-lighter: #c4b8e0;            /* Even lighter purple */
    --primary-selection: rgba(139, 127, 184, 0.1);  /* Selection background */
    --primary-color-rgb: 139, 127, 184;     /* RGB version for rgba() */
    
    /* ===== NEUTRAL COLORS - LIGHT THEME ===== */
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --border-gray: #d0d0d0;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --bg-light: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* ===== THEME SPECIFIC COLORS ===== */
    --body-bg: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.7);
    --toolbar-bg: rgba(255, 255, 255, 0.8);
    --sidebar-bg: rgba(235, 235, 235, 1);
    --login-bg: rgba(255, 255, 255, 0.9);
    --searchbar-bg: rgba(235, 235, 235, 0.7);
    --searchbar-bg-hover: rgba(255, 255, 255, 0.8);
    --searchbar-border: 2px solid rgba(255, 255, 255, 0.3);
    
    /* ===== SEMANTIC COLORS ===== */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-color: #dc3545;
    --info-color: #17a2b8;
    
    /* ===== LAYOUT DIMENSIONS ===== */
    --sidebar-width: 60px;
    --topbar-height: 60px;
    --content-max-width: 1500px;
    --container-padding: 20px;
    
    /* ===== BORDER RADIUS ===== */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
    --radius-pill: 25px;
    
    /* ===== SHADOWS ===== */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-selection: 0 0 0 3px var(--primary-color);
    --glass-shadow: 0 2px 5px rgba(0,0,0,0.1), inset 0 2px 4px rgba(0,0,0,0.1);
    --glass-shadow-inset: inset 0 2px 4px rgba(0,0,0,0.1);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-slow: all 0.3s ease;
    --transition-sidebar: margin-left 0.3s ease;
    --transition-theme: all 0.3s ease;
    
    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    
    /* ===== COMPONENT SPECIFIC ===== */
    /* Amazon Item Card */
    --amazon-item-width: 220px;
    --amazon-item-height: 330px;
    --amazon-item-image-height: 200px;
    --amazon-item-side-width: 60px;
    
    /* Search Bar */
    --searchbar-height: 50px;
    
    /* Buttons */
    --btn-padding-sm: 6px 12px;
    --btn-padding-base: 8px 16px;
    --btn-padding-lg: 12px 24px;
    
    /* Loading Animation */
    --loading-bg-start: #e0e0e0;
    --loading-bg-end: #f0f0f0;
    
    /* Z-index Scale */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-tooltip: 1100;
    --z-notification: 1200;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* ===== NEUTRAL COLORS - DARK THEME ===== */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --bg-light: #1a1a1a;
    --light-gray: #2a2a2a;
    --medium-gray: #3a3a3a;
    --border-gray: #4a4a4a;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* ===== THEME SPECIFIC COLORS - DARK ===== */
    --body-bg: #1a1a1a;
    --card-bg: rgba(10, 10, 10, 0.9)  blur(5px);
    --toolbar-bg: rgba(30, 30, 30, 0.9);
    --sidebar-bg: rgba(40, 40, 40, 1);
    --login-bg: rgba(10, 10, 10, 0.8);
    --searchbar-bg: rgba(40, 40, 40, 0.9);
    --searchbar-bg-hover: rgba(50, 50, 50, 0.9);
    --searchbar-border: 2px solid rgba(255, 255, 255, 0.1);
    
    /* ===== ADJUSTED SHADOWS FOR DARK THEME ===== */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    --glass-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.35);
    --glass-shadow-inset: inset 0 2px 4px rgba(0,0,0,0.2);
    
    /* ===== ADJUSTED LOADING COLORS ===== */
    --loading-bg-start: #3a3a3a;
    --loading-bg-end: #4a4a4a;
    
    /* ===== SELECTION COLORS ===== */
    --primary-selection: rgba(139, 127, 184, 0.2);
}

/* ===== MOBILE ADAPTATION ===== */
[data-mobile="true"] {
    /* FONT SIZES */
    --font-size-xs: 8px;
    --font-size-sm: 11px;
    --font-size-base: 12px;
    --font-size-lg: 14px;
    --font-size-xl: 15px;
    --font-size-2xl: 17px;

    /* LAYOUT DIMENSIONS */
    --topbar-height: 55px;
    --container-padding: 15px;
    
    /* BUTTON PADDINGS */
    --btn-padding-sm: 5px 10px;
    --btn-padding-base: 7px 14px;
    --btn-padding-lg: 11px 22px;
}

/* ===== SMOOTH TRANSITIONS FOR THEME SWITCHING ===== */
* {
    transition: background-color var(--transition-theme), 
                color var(--transition-theme), 
                border-color var(--transition-theme),
                box-shadow var(--transition-theme);
}