/**
 * Theme Variables CSS
 * Contains all CSS variables used across the application
 */

:root {
    /* Base colors */
    --white: #ffffff;
    --black: #000000;
    
    /* Default theme colors */
    --default: #6366f1;
    --default-rgb: 99, 102, 241;
    --default-border: rgba(99, 102, 241, 0.3);
    --default-shadow: rgba(99, 102, 241, 0.4);
    
    /* Blue theme */
    --blue: #0162e8;
    --blue-rgb: 1, 98, 232;
    --blue-border: rgba(1, 98, 232, 0.3);
    --blue-shadow: rgba(1, 98, 232, 0.4);
    
    /* Gold theme */
    --gold: #f7b924;
    --gold-rgb: 247, 185, 36;
    --gold-border: rgba(247, 185, 36, 0.3);
    --gold-shadow: rgba(247, 185, 36, 0.4);
    
    /* Purple theme */
    --purple: #6f42c1;
    --purple-rgb: 111, 66, 193;
    --purple-border: rgba(111, 66, 193, 0.3);
    --purple-shadow: rgba(111, 66, 193, 0.4);

    /* Gestfy gradient theme - primarily teal/cyan */

    --gestfy-teal: #0acbc2;
    --gestfy-teal-rgb: 10, 203, 194;
    --gestfy-teal-border: rgba(10, 203, 194, 0.3);
    --gestfy-teal-shadow: rgba(10, 203, 194, 0.4);
    
    /* Gestfy gradient theme - primarily blue */
    --gestfy-blue: #39a4f3;
    --gestfy-blue-rgb: 57, 164, 243;
    --gestfy-blue-border: rgba(57, 164, 243, 0.3);
    --gestfy-blue-shadow: rgba(57, 164, 243, 0.4);
    
    /* Gestfy gradient theme - mix (turquoise) */
    --gestfy-turquoise: #20b7de;
    --gestfy-turquoise-rgb: 32, 183, 222;
    --gestfy-turquoise-border: rgba(32, 183, 222, 0.3);
    --gestfy-turquoise-shadow: rgba(32, 183, 222, 0.4);
    
    /* Gestfy gradient theme */
    --gestfy-teal: #0acbc2;
    --gestfy-teal-rgb: 10, 203, 194;
    --gestfy-teal-border: rgba(10, 203, 194, 0.3);
    --gestfy-teal-shadow: rgba(10, 203, 194, 0.4);

    /* Gestfy gradient theme - primarily blue */
    --gestfy-blue: #39a4f3;
    --gestfy-blue-rgb: 57, 164, 243;
    --gestfy-blue-border: rgba(57, 164, 243, 0.3);
    --gestfy-blue-shadow: rgba(57, 164, 243, 0.4);

    /* Gestfy gradient theme - mix (turquoise) */
    --gestfy-turquoise: #20b7de;
    --gestfy-turquoise-rgb: 32, 183, 222;
    --gestfy-turquoise-border: rgba(32, 183, 222, 0.3);
    --gestfy-turquoise-shadow: rgba(32, 183, 222, 0.4);
    
    /* UI colors */
    --success: #28a745;
    --success-rgb: 40, 167, 69;
    --danger: #dc3545;
    --danger-rgb: 220, 53, 69;
    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --info: #17a2b8;
    --info-rgb: 23, 162, 184;
    
    /* Text colors */
    --text-dark: #212529;
    --text-light: #f8f9fa;
    --text-muted-dark: #6c757d;
    --text-muted-light: #d0d0d0;
    
    /* Light mode vars */
    --light-bg: #f8f9fa;
    --light-card-bg: #ffffff;
    --light-border: rgba(0, 0, 0, 0.125);
    --light-input-bg: #ffffff;
    --light-input-border: #ced4da;
    
    /* Dark mode vars */
    --dark-bg: #1f2937;
    --dark-card-bg: #2a3441;
    --dark-border: rgba(255, 255, 255, 0.125);
    --dark-input-bg: #374151;
    --dark-input-border: #4b5563;

    /* Calendar-specific vars */
    --fc-border-color: rgba(255, 255, 255, 0.1);
    --fc-button-bg-color: #0d6efd;
    --fc-button-border-color: #0d6efd;
    --fc-button-hover-bg-color: #0b5ed7;
    --fc-button-hover-border-color: #0a58ca;
    --fc-today-bg-color: rgba(13, 110, 253, 0.15);
}

/* Light mode variables */
html[data-theme-mode="light"],
.light-mode {
    /* Basic colors */
    --body-bg: var(--light-bg);
    --card-bg: var(--light-card-bg);
    --border-color: var(--light-border);
    --text-color: var(--text-dark);
    --text-muted: var(--text-muted-dark);
    
    /* Input styles */
    --input-bg: var(--light-input-bg);
    --input-border: var(--light-input-border);
    --input-focus-bg: var(--white);
    --input-text: var(--text-dark);
    
    /* Menu/sidebar */
    --menu-bg: var(--light-bg);
    --menu-text: var(--text-dark);
    --menu-border: var(--light-border);
    --sidebar-background: var(--light-bg);
    
    /* Calendar specific */
    --fc-border-color: rgba(0, 0, 0, 0.1);
    --fc-today-bg-color: rgba(var(--primary-rgb), 0.1);
}

/* Dark mode variables */
html[data-theme-mode="dark"],
.dark-mode {
    /* Basic colors */
    --body-bg: var(--dark-bg);
    --card-bg: var(--dark-card-bg);
    --border-color: var(--dark-border);
    --text-color: var(--text-light);
    --text-muted: var(--text-muted-light);
    
    /* Input styles */
    --input-bg: var(--dark-input-bg);
    --input-border: var(--dark-input-border);
    --input-focus-bg: rgba(255, 255, 255, 0.1);
    --input-text: var(--text-light);
    
    /* Menu/sidebar */
    --menu-bg: var(--dark-bg);
    --menu-text: var(--text-light);
    --menu-border: var(--dark-border);
    --sidebar-background: var(--dark-bg);
    
    /* Calendar specific */
    --fc-border-color: rgba(255, 255, 255, 0.1);
    --fc-today-bg-color: rgba(var(--primary-rgb), 0.25);
}

/* Primary color based on theme */
:root {
    /* Default primary */
    --primary-color: var(--default);
    --primary-rgb: var(--default-rgb);
    --primary-border: var(--default-border);
    --primary-shadow: var(--default-shadow);
}

/* Theme-specific primary color overrides */
[data-primary="default"],
.theme-default-active {
    --primary-color: var(--default);
    --primary-rgb: var(--default-rgb);
    --primary-border: var(--default-border);
    --primary-shadow: var(--default-shadow);
}

[data-primary="blue"],
.theme-blue-active {
    --primary-color: var(--blue);
    --primary-rgb: var(--blue-rgb);
    --primary-border: var(--blue-border);
    --primary-shadow: var(--blue-shadow);
}

[data-primary="gold"],
.theme-gold-active {
    --primary-color: var(--gold);
    --primary-rgb: var(--gold-rgb);
    --primary-border: var(--gold-border);
    --primary-shadow: var(--gold-shadow);
}

[data-primary="purple"],
.theme-purple-active {
    --primary-color: var(--purple);
    --primary-rgb: var(--purple-rgb);
    --primary-border: var(--purple-border);
    --primary-shadow: var(--purple-shadow);
}

[data-primary="gestfy-blue"],
.theme-gradient-active {
    --primary-color: var(--gestfy-blue);
    --primary-rgb: var(--gestfy-blue-rgb);
    --primary-border: rgba(var(--gestfy-blue-rgb), 0.3);
    --primary-shadow: rgba(var(--gestfy-blue-rgb), 0.4);
} 

[data-primary="gestfy-teal"],
.theme-special-active {
    --primary-color: var(--gestfy-teal);
    --primary-rgb: var(--gestfy-teal-rgb);
    --primary-border: rgba(var(--gestfy-teal-rgb), 0.3);
    --primary-shadow: rgba(var(--gestfy-teal-rgb), 0.4);
}