/* Theme Variables */
:root {
    /* Light Theme (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-page: #ffffff;
    --bg-modal: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-selected: #e3f2fd;

    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    --border-color: #dddddd;
    --border-light: #eeeeee;

    --accent-primary: #2196f3;
    --accent-hover: #1976d2;
    --accent-light: #e3f2fd;

    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);

    --page-shadow: 0 0 10px rgba(0,0,0,0.1);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

/* Dark Gray Theme */
[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252525;
    --bg-tertiary: #2d2d2d;
    --bg-page: #2a2a2a;
    --bg-modal: #2d2d2d;
    --bg-hover: #363636;
    --bg-selected: #37474f;

    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --text-inverse: #1a1a1a;

    --border-color: #404040;
    --border-light: #353535;

    --accent-primary: #64b5f6;
    --accent-hover: #42a5f5;
    --accent-light: #37474f;

    --success: #81c784;
    --warning: #ffb74d;
    --error: #e57373;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);

    --page-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Theme transition */
body {
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

.modal-content,
.template-card,
.recent-file-card,
.scene-item,
.toolbar-btn,
.icon-btn {
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}