/* Theme Variables */
:root {
    /* Light Theme Colors */
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #2c3e50;
    --secondary-light: #34495e;
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --neutral-color: #95a5a6;
    --accent-color: #3498db;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #ecf0f1;
    
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #95a5a6;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-color: #ddd;
    --border-light: #e0e0e0;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.15);
    
    /* Character Creation Theme Colors */
    --char-bg-dark: #1a1a2e;
    --char-bg-darker: #16213e;
    --char-bg-card: #0f3460;
    --char-accent: #e94560;
    --char-accent-light: #ff6b6b;
    --char-accent-dark: #c73552;
    --char-highlight: #ffeb3b;
    
    /* Editor Node Colors */
    --node-story: #3498db;
    --node-choice: #f39c12;
    --node-condition: #9b59b6;
    --node-event: #2ecc71;
    --node-ending: #e74c3c;
    --node-keystone: #f1c40f;
}

/* Dark Theme */
body.dark-mode {
    --primary-color: #5dade2;
    --primary-dark: #3498db;
    --secondary-color: #1a252f;
    --secondary-light: #2c3e50;
    --accent-color: #5dade2;
    
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-light: #808080;
    --text-inverse: #1a1a1a;
    
    --border-color: #444;
    --border-light: #555;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 5px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.5);
    
    /* Character Creation - adjust for dark mode */
    --char-bg-dark: #0d0d1a;
    --char-bg-darker: #0a0a14;
    --char-bg-card: #16213e;
    --char-accent: #ff6b88;
    --char-accent-light: #ff8fa3;
    --char-accent-dark: #e94560;
}

/* Apply Theme Variables */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

#game-header {
    background: var(--secondary-color);
    color: var(--text-inverse);
}

#story-container {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.story-text {
    color: var(--text-primary);
}

.choice-btn {
    background: var(--primary-color);
    color: var(--text-inverse);
}

.choice-btn:hover {
    background: var(--primary-dark);
}

#sidebar {
    background: var(--bg-tertiary);
}

.sidebar-section {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.sidebar-section h3 {
    color: var(--text-primary);
}

#game-footer {
    background: var(--secondary-light);
}

.control-btn {
    background: var(--primary-color);
}

.control-btn:hover {
    background: var(--primary-dark);
}

.modal-content {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Story-specific Themes */
.story-theme-fantasy {
    --primary-color: #9b59b6;
    --primary-dark: #8e44ad;
    --secondary-color: #1a1a2e;
}

.story-theme-scifi {
    --primary-color: #00d2ff;
    --primary-dark: #00a8cc;
    --secondary-color: #0f3057;
}

.story-theme-horror {
    --primary-color: #c0392b;
    --primary-dark: #a93226;
    --secondary-color: #1c1c1c;
}

.story-theme-romance {
    --primary-color: #e91e63;
    --primary-dark: #c2185b;
    --secondary-color: #4a148c;
}

/* Text Size Adjustments */
body[data-text-size="12"] {
    font-size: 12px;
}

body[data-text-size="14"] {
    font-size: 14px;
}

body[data-text-size="16"] {
    font-size: 16px;
}

body[data-text-size="18"] {
    font-size: 18px;
}

body[data-text-size="20"] {
    font-size: 20px;
}

body[data-text-size="22"] {
    font-size: 22px;
}

body[data-text-size="24"] {
    font-size: 24px;
}

/* Animation Toggle */
body[data-animations="false"] * {
    animation: none !important;
    transition: none !important;
}

/* High Contrast Mode */
body.high-contrast {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #000000;
    --primary-color: #0000ff;
    --primary-dark: #000080;
}

body.high-contrast.dark-mode {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #000000;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --primary-color: #ffff00;
    --primary-dark: #cccc00;
}

/* Custom Story Styles Hook */
.custom-styles {
    /* Placeholder for dynamically injected story-specific styles */
}