/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Theme color variables for light and dark modes
   ============================================ */

/* Light Theme (Default) */
:root,
body[data-theme="light"],
body:not([data-theme]) {
    /* Accent Colors */
    --accent-color-1: #1E40AF;
    --accent-color-2: #3B82F6;
    --accent-color-1-rgb: 30, 64, 175;
    --accent-color-2-rgb: 59, 130, 246;
    
    /* Background Colors */
    --bg-color: #FFFFFF;
    --hover-bg: #F5F5F5;
    
    /* Text Colors */
    --text-color: #333333;
    --text-color-light: #666666;
    --text-color-muted: #999999;
    
    /* Border Colors */
    --border-color: #E0E0E0;
    --border-color-dark: #CCCCCC;
    
    /* Link Colors */
    --link-color: #1E40AF;
    --link-hover-color: #3B82F6;
    
    /* Button Colors */
    --btn-primary-bg: #1E40AF;
    --btn-primary-hover: #3B82F6;
    --btn-primary-text: #FFFFFF;
    
    --btn-secondary-bg: transparent;
    --btn-secondary-hover: #F5F5F5;
    --btn-secondary-text: #333333;
    --btn-secondary-border: #E0E0E0;
}

/* Dark Theme */
body[data-theme="dark"],
[data-theme="dark"] {
    /* Accent Colors */
    --accent-color-1: #60A5FA;
    --accent-color-2: #93C5FD;
    --accent-color-1-rgb: 96, 165, 250;
    --accent-color-2-rgb: 147, 197, 253;
    
    /* Background Colors */
    --bg-color: #1A1A1A;
    --hover-bg: #2A2A2A;
    
    /* Text Colors */
    --text-color: #E0E0E0;
    --text-color-light: #B0B0B0;
    --text-color-muted: #808080;
    
    /* Border Colors */
    --border-color: #3A3A3A;
    --border-color-dark: #4A4A4A;
    
    /* Link Colors */
    --link-color: #60A5FA;
    --link-hover-color: #93C5FD;
    
    /* Button Colors */
    --btn-primary-bg: #60A5FA;
    --btn-primary-hover: #93C5FD;
    --btn-primary-text: #1A1A1A;
    
    --btn-secondary-bg: transparent;
    --btn-secondary-hover: #2A2A2A;
    --btn-secondary-text: #E0E0E0;
    --btn-secondary-border: #3A3A3A;
}

/* Ensure variables are available in all contexts */
html {
    --accent-color-1: #1E40AF;
    --accent-color-2: #3B82F6;
    --accent-color-1-rgb: 30, 64, 175;
    --accent-color-2-rgb: 59, 130, 246;
    --bg-color: #FFFFFF;
    --hover-bg: #F5F5F5;
    --text-color: #333333;
    --border-color: #E0E0E0;
    --link-color: #1E40AF;
    --link-hover-color: #3B82F6;
}

html[data-theme="dark"],
html body[data-theme="dark"] {
    --accent-color-1: #60A5FA;
    --accent-color-2: #93C5FD;
    --accent-color-1-rgb: 96, 165, 250;
    --accent-color-2-rgb: 147, 197, 253;
    --bg-color: #1A1A1A;
    --hover-bg: #2A2A2A;
    --text-color: #E0E0E0;
    --border-color: #3A3A3A;
    --link-color: #60A5FA;
    --link-hover-color: #93C5FD;
}