/* Shared Theme System - Multi-Theme Support */

:root {
    /* Theme Selector - Change this to switch themes */
    /* Options: "light", "dark", "purple", "blue", "green" */
    --theme-name: "light";
    
    /* ===== SHARED LAYOUT VARIABLES ===== */
    /* These are consistent across all themes */
    --container-max-width: 800px;
    --card-border-radius: 20px;
    --btn-border-radius: 25px;
    --info-border-radius: 15px;
    --refresh-border-radius: 15px;
    --card-shadow: 0 20px 40px rgba(123, 140, 240, 0.2);
    --btn-shadow-hover: 0 5px 15px rgba(0,0,0,0.2);
    
    /* Typography Sizes */
    --font-size-header: 36px;
    --font-size-status: 24px;
    --font-size-time: 36px;
    
    /* Header Typography Normalization */
    --header-line-height: 1.2;
    --header-padding-top: 6px;
    --header-padding-bottom: 6px;
    
    /* Mobile Header Normalization */
    --font-size-header-mobile: 28px;
    --logo-size-mobile: 60px;
    --header-line-height-mobile: 1.2;
    --header-padding-top-mobile: 4px;
    --header-padding-bottom-mobile: 4px;
    --font-size-info: 18px;
    --font-size-btn: 16px;
    --font-size-footer: 14px;
    --font-size-small: 12px;
    --font-size-tiny: 11px;
    
    /* Component Sizes */
    --logo-size: 80px;
    --status-dot-size: 20px;
    
    /* ===== PURPLE TWILIGHT THEME ===== */
    --purple-primary-gradient-start: #7b8cf0;
    --purple-primary-gradient-end: #84689b;
    --purple-text-primary: #333;
    --purple-text-secondary: #666;
    --purple-text-muted: #999;
    --purple-text-white: white;
    --purple-text-white-transparent: rgba(255, 255, 255, 0.8);
    --purple-text-white-semi: rgba(255, 255, 255, 0.7);
    --purple-text-header: white;
    --purple-status-active: #4CAF50;
    --purple-status-standby: #ff9500;
    --purple-status-error: #f44336;
    --purple-bg-card: white;
    --purple-bg-info-section: #f8f9ff;
    --purple-bg-standby-gradient-start: #fff3e0;
    --purple-bg-standby-gradient-end: #ffe0b2;
    --purple-bg-active-gradient-start: #e8f5e8;
    --purple-bg-active-gradient-end: #c8e6c9;
    --purple-bg-error-gradient-start: #ffebee;
    --purple-bg-error-gradient-end: #ffcdd2;
    --purple-bg-refresh-control: rgba(255, 255, 255, 0.2);
    --purple-border-refresh-control: rgba(255, 255, 255, 0.3);
    --purple-btn-primary-start: #7b8cf0;
    --purple-btn-primary-end: #84689b;
    --purple-btn-warning-start: #ff9500;
    --purple-btn-warning-end: #ff8f00;
    --purple-btn-danger-start: #f44336;
    --purple-btn-danger-end: #d32f2f;
    
    /* ===== DARK THEME ===== */
    --dark-primary-gradient-start: #1a1a2e;
    --dark-primary-gradient-end: #16213e;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #888;
    --dark-text-white: white;
    --dark-text-white-transparent: rgba(255, 255, 255, 0.8);
    --dark-text-white-semi: rgba(255, 255, 255, 0.7);
    --dark-text-header: white;
    --dark-status-active: #66bb6a;
    --dark-status-standby: #ffa726;
    --dark-status-error: #ef5350;
    --dark-bg-card: #2d2d30;
    --dark-bg-info-section: #1e1e1e;
    --dark-bg-standby-gradient-start: #2d2416;
    --dark-bg-standby-gradient-end: #3d3020;
    --dark-bg-active-gradient-start: #1b2e1b;
    --dark-bg-active-gradient-end: #254025;
    --dark-bg-error-gradient-start: #2e1b1b;
    --dark-bg-error-gradient-end: #402525;
    --dark-bg-refresh-control: rgba(255, 255, 255, 0.1);
    --dark-border-refresh-control: rgba(255, 255, 255, 0.2);
    --dark-btn-primary-start: #4a5568;
    --dark-btn-primary-end: #2d3748;
    --dark-btn-warning-start: #d69e2e;
    --dark-btn-warning-end: #b7791f;
    --dark-btn-danger-start: #e53e3e;
    --dark-btn-danger-end: #c53030;
    
    /* ===== LIGHT THEME ===== */
    --light-primary-gradient-start: #f7fafc;
    --light-primary-gradient-end: #edf2f7;
    --light-text-primary: #2d3748;
    --light-text-secondary: #4a5568;
    --light-text-muted: #718096;
    /* --light-text-white: #2d3748; */
    --light-text-white: white;
    --light-text-white-transparent: rgba(45, 55, 72, 0.8);
    --light-text-white-semi: rgba(45, 55, 72, 0.7);
    --light-text-header: #2d3748;
    --light-status-active: #38a169;
    --light-status-standby: #d69e2e;
    --light-status-error: #e53e3e;
    --light-bg-card: white;
    --light-bg-info-section: #f7fafc;
    --light-bg-standby-gradient-start: #fffaf0;
    --light-bg-standby-gradient-end: #fef5e7;
    --light-bg-active-gradient-start: #f0fff4;
    --light-bg-active-gradient-end: #c6f6d5;
    --light-bg-error-gradient-start: #fed7d7;
    --light-bg-error-gradient-end: #feb2b2;
    --light-bg-refresh-control: rgba(45, 55, 72, 0.1);
    --light-border-refresh-control: rgba(45, 55, 72, 0.2);
    --light-btn-primary-start: #4299e1;
    --light-btn-primary-end: #3182ce;
    --light-btn-warning-start: #d69e2e;
    --light-btn-warning-end: #b7791f;
    --light-btn-danger-start: #e53e3e;
    --light-btn-danger-end: #c53030;
    
    /* ===== BLUE THEME ===== */
    --blue-primary-gradient-start: #4299e1;
    --blue-primary-gradient-end: #2b6cb0;
    --blue-text-primary: #1a365d;
    --blue-text-secondary: #2c5282;
    --blue-text-muted: #4a5568;
    --blue-text-white: white;
    --blue-text-white-transparent: rgba(255, 255, 255, 0.8);
    --blue-text-white-semi: rgba(255, 255, 255, 0.7);
    --blue-text-header: white;
    --blue-status-active: #38a169;
    --blue-status-standby: #ed8936;
    --blue-status-error: #e53e3e;
    --blue-bg-card: white;
    --blue-bg-info-section: #ebf8ff;
    --blue-bg-standby-gradient-start: #fef5e7;
    --blue-bg-standby-gradient-end: #fed7aa;
    --blue-bg-active-gradient-start: #f0fff4;
    --blue-bg-active-gradient-end: #c6f6d5;
    --blue-bg-error-gradient-start: #fed7d7;
    --blue-bg-error-gradient-end: #feb2b2;
    --blue-bg-refresh-control: rgba(255, 255, 255, 0.2);
    --blue-border-refresh-control: rgba(255, 255, 255, 0.3);
    --blue-btn-primary-start: #4299e1;
    --blue-btn-primary-end: #2b6cb0;
    --blue-btn-warning-start: #ed8936;
    --blue-btn-warning-end: #c05621;
    --blue-btn-danger-start: #e53e3e;
    --blue-btn-danger-end: #c53030;
    
    /* ===== GREEN THEME ===== */
    --green-primary-gradient-start: #48bb78;
    --green-primary-gradient-end: #2f855a;
    --green-text-primary: #1a202c;
    --green-text-secondary: #2d3748;
    --green-text-muted: #4a5568;
    --green-text-white: white;
    --green-text-white-transparent: rgba(255, 255, 255, 0.8);
    --green-text-white-semi: rgba(255, 255, 255, 0.7);
    --green-text-header: white;
    --green-status-active: #38a169;
    --green-status-standby: #ed8936;
    --green-status-error: #e53e3e;
    --green-bg-card: white;
    --green-bg-info-section: #f7fafc;
    --green-bg-standby-gradient-start: #fef5e7;
    --green-bg-standby-gradient-end: #fed7aa;
    --green-bg-active-gradient-start: #f0fff4;
    --green-bg-active-gradient-end: #c6f6d5;
    --green-bg-error-gradient-start: #fed7d7;
    --green-bg-error-gradient-end: #feb2b2;
    --green-bg-refresh-control: rgba(255, 255, 255, 0.2);
    --green-border-refresh-control: rgba(255, 255, 255, 0.3);
    --green-btn-primary-start: #48bb78;
    --green-btn-primary-end: #2f855a;
    --green-btn-warning-start: #ed8936;
    --green-btn-warning-end: #c05621;
    --green-btn-danger-start: #e53e3e;
    --green-btn-danger-end: #c53030;
    
    /* ===== ACTIVE THEME VARIABLES ===== */
    /* Theme switching using CSS comparison - these will update based on --theme-name */
    --primary-gradient-start: var(--light-primary-gradient-start);
    --primary-gradient-end: var(--light-primary-gradient-end);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --text-white: var(--light-text-white);
    --text-white-transparent: var(--light-text-white-transparent);
    --text-white-semi: var(--light-text-white-semi);
    --text-header: var(--light-text-header);
    --status-active: var(--light-status-active);
    --status-standby: var(--light-status-standby);
    --status-error: var(--light-status-error);
    --bg-card: var(--light-bg-card);
    --bg-info-section: var(--light-bg-info-section);
    --bg-standby-gradient-start: var(--light-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--light-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--light-bg-active-gradient-start);
    --bg-active-gradient-end: var(--light-bg-active-gradient-end);
    --bg-error-gradient-start: var(--light-bg-error-gradient-start);
    --bg-error-gradient-end: var(--light-bg-error-gradient-end);
    --bg-refresh-control: var(--light-bg-refresh-control);
    --border-refresh-control: var(--light-border-refresh-control);
    --btn-primary-start: var(--light-btn-primary-start);
    --btn-primary-end: var(--light-btn-primary-end);
    --btn-warning-start: var(--light-btn-warning-start);
    --btn-warning-end: var(--light-btn-warning-end);
    --btn-danger-start: var(--light-btn-danger-start);
    --btn-danger-end: var(--light-btn-danger-end);
}

/* ===== THEME SWITCHING SYSTEM ===== */
/* This creates different :root contexts based on class names that correspond to theme names */

/* Dark Theme - activated when body has class 'theme-dark' */
body.theme-dark {
    --primary-gradient-start: var(--dark-primary-gradient-start);
    --primary-gradient-end: var(--dark-primary-gradient-end);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --text-white: var(--dark-text-white);
    --text-white-transparent: var(--dark-text-white-transparent);
    --text-white-semi: var(--dark-text-white-semi);
    --text-header: var(--dark-text-header);
    --status-active: var(--dark-status-active);
    --status-standby: var(--dark-status-standby);
    --status-error: var(--dark-status-error);
    --bg-card: var(--dark-bg-card);
    --bg-info-section: var(--dark-bg-info-section);
    --bg-standby-gradient-start: var(--dark-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--dark-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--dark-bg-active-gradient-start);
    --bg-active-gradient-end: var(--dark-bg-active-gradient-end);
    --bg-error-gradient-start: var(--dark-bg-error-gradient-start);
    --bg-error-gradient-end: var(--dark-bg-error-gradient-end);
    --bg-refresh-control: var(--dark-bg-refresh-control);
    --border-refresh-control: var(--dark-border-refresh-control);
    --btn-primary-start: var(--dark-btn-primary-start);
    --btn-primary-end: var(--dark-btn-primary-end);
    --btn-warning-start: var(--dark-btn-warning-start);
    --btn-warning-end: var(--dark-btn-warning-end);
    --btn-danger-start: var(--dark-btn-danger-start);
    --btn-danger-end: var(--dark-btn-danger-end);
}

/* Light Theme - activated when body has class 'theme-light' */
body.theme-light {
    --primary-gradient-start: var(--light-primary-gradient-start);
    --primary-gradient-end: var(--light-primary-gradient-end);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --text-white: var(--light-text-white);
    --text-white-transparent: var(--light-text-white-transparent);
    --text-white-semi: var(--light-text-white-semi);
    --text-header: var(--light-text-header);
    --status-active: var(--light-status-active);
    --status-standby: var(--light-status-standby);
    --status-error: var(--light-status-error);
    --bg-card: var(--light-bg-card);
    --bg-info-section: var(--light-bg-info-section);
    --bg-standby-gradient-start: var(--light-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--light-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--light-bg-active-gradient-start);
    --bg-active-gradient-end: var(--light-bg-active-gradient-end);
    --bg-error-gradient-start: var(--light-bg-error-gradient-start);
    --bg-error-gradient-end: var(--light-bg-error-gradient-end);
    --bg-refresh-control: var(--light-bg-refresh-control);
    --border-refresh-control: var(--light-border-refresh-control);
    --btn-primary-start: var(--light-btn-primary-start);
    --btn-primary-end: var(--light-btn-primary-end);
    --btn-warning-start: var(--light-btn-warning-start);
    --btn-warning-end: var(--light-btn-warning-end);
    --btn-danger-start: var(--light-btn-danger-start);
    --btn-danger-end: var(--light-btn-danger-end);
}

/* Purple Theme - activated when body has class 'theme-purple' */
body.theme-purple {
    --primary-gradient-start: var(--purple-primary-gradient-start);
    --primary-gradient-end: var(--purple-primary-gradient-end);
    --text-primary: var(--purple-text-primary);
    --text-secondary: var(--purple-text-secondary);
    --text-muted: var(--purple-text-muted);
    --text-white: var(--purple-text-white);
    --text-white-transparent: var(--purple-text-white-transparent);
    --text-white-semi: var(--purple-text-white-semi);
    --text-header: var(--purple-text-header);
    --status-active: var(--purple-status-active);
    --status-standby: var(--purple-status-standby);
    --status-error: var(--purple-status-error);
    --bg-card: var(--purple-bg-card);
    --bg-info-section: var(--purple-bg-info-section);
    --bg-standby-gradient-start: var(--purple-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--purple-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--purple-bg-active-gradient-start);
    --bg-active-gradient-end: var(--purple-bg-active-gradient-end);
    --bg-error-gradient-start: var(--purple-bg-error-gradient-start);
    --bg-error-gradient-end: var(--purple-bg-error-gradient-end);
    --bg-refresh-control: var(--purple-bg-refresh-control);
    --border-refresh-control: var(--purple-border-refresh-control);
    --btn-primary-start: var(--purple-btn-primary-start);
    --btn-primary-end: var(--purple-btn-primary-end);
    --btn-warning-start: var(--purple-btn-warning-start);
    --btn-warning-end: var(--purple-btn-warning-end);
    --btn-danger-start: var(--purple-btn-danger-start);
    --btn-danger-end: var(--purple-btn-danger-end);
}

/* Blue Theme - activated when body has class 'theme-blue' */
body.theme-blue {
    --primary-gradient-start: var(--blue-primary-gradient-start);
    --primary-gradient-end: var(--blue-primary-gradient-end);
    --text-primary: var(--blue-text-primary);
    --text-secondary: var(--blue-text-secondary);
    --text-muted: var(--blue-text-muted);
    --text-white: var(--blue-text-white);
    --text-white-transparent: var(--blue-text-white-transparent);
    --text-white-semi: var(--blue-text-white-semi);
    --text-header: var(--blue-text-header);
    --status-active: var(--blue-status-active);
    --status-standby: var(--blue-status-standby);
    --status-error: var(--blue-status-error);
    --bg-card: var(--blue-bg-card);
    --bg-info-section: var(--blue-bg-info-section);
    --bg-standby-gradient-start: var(--blue-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--blue-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--blue-bg-active-gradient-start);
    --bg-active-gradient-end: var(--blue-bg-active-gradient-end);
    --bg-error-gradient-start: var(--blue-bg-error-gradient-start);
    --bg-error-gradient-end: var(--blue-bg-error-gradient-end);
    --bg-refresh-control: var(--blue-bg-refresh-control);
    --border-refresh-control: var(--blue-border-refresh-control);
    --btn-primary-start: var(--blue-btn-primary-start);
    --btn-primary-end: var(--blue-btn-primary-end);
    --btn-warning-start: var(--blue-btn-warning-start);
    --btn-warning-end: var(--blue-btn-warning-end);
    --btn-danger-start: var(--blue-btn-danger-start);
    --btn-danger-end: var(--blue-btn-danger-end);
}

/* Green Theme - activated when body has class 'theme-green' */
body.theme-green {
    --primary-gradient-start: var(--green-primary-gradient-start);
    --primary-gradient-end: var(--green-primary-gradient-end);
    --text-primary: var(--green-text-primary);
    --text-secondary: var(--green-text-secondary);
    --text-muted: var(--green-text-muted);
    --text-white: var(--green-text-white);
    --text-white-transparent: var(--green-text-white-transparent);
    --text-white-semi: var(--green-text-white-semi);
    --text-header: var(--green-text-header);
    --status-active: var(--green-status-active);
    --status-standby: var(--green-status-standby);
    --status-error: var(--green-status-error);
    --bg-card: var(--green-bg-card);
    --bg-info-section: var(--green-bg-info-section);
    --bg-standby-gradient-start: var(--green-bg-standby-gradient-start);
    --bg-standby-gradient-end: var(--green-bg-standby-gradient-end);
    --bg-active-gradient-start: var(--green-bg-active-gradient-start);
    --bg-active-gradient-end: var(--green-bg-active-gradient-end);
    --bg-error-gradient-start: var(--green-bg-error-gradient-start);
    --bg-error-gradient-end: var(--green-bg-error-gradient-end);
    --bg-refresh-control: var(--green-bg-refresh-control);
    --border-refresh-control: var(--green-border-refresh-control);
    --btn-primary-start: var(--green-btn-primary-start);
    --btn-primary-end: var(--green-btn-primary-end);
    --btn-warning-start: var(--green-btn-warning-start);
    --btn-warning-end: var(--green-btn-warning-end);
    --btn-danger-start: var(--green-btn-danger-start);
    --btn-danger-end: var(--green-btn-danger-end);
}