@import "music.css";
@import "layout.css";
@import "forms.css";
@import "characters.css";
@import "responsive.css";

:root {
    --primary1: #3498db;
    --primary2: #2980b9;
    --primary3: #1a62a0;

    --background: #f4f7f6;
    --background2: #e0e0e0;
    --text: #333;

    --important: #fff3cd;
    --important2: #ffeaa7;
    --border: #cccccc;

    --header-bg: #ffffff;
    --header-text: #2c3e50;
    --card-bg: #ffffff;
    --card-border: #e0e0e0;
    --custom-card-bg: #e0f7fa; /* Light cyan for custom chars */
    --custom-card-border: #80deea; /* Darker cyan for custom chars */
    --section-bg: #ffffff;
    --section-border: #e0e0e0;
    --input-border: #e0e0e0;
    --input-focus-border: #3498db;
    --script-output-bg: #f8f9fa;
    --script-output-narration-bg: rgba(0, 0, 0, 0.03);
    --script-output-text: #555;
    --script-output-strong-text: #2c3e50;
    --selected-card-bg: #f0f9f0;
    --selected-card-border: #2ecc71;
    --selected-custom-card-bg: #e8f5e9; /* Slightly darker green for selected custom */
    --selected-custom-card-border: #4caf50; /* Stronger green border for selected custom */
    --selected-list-bg: #f8f8f8;
    --title-shadow-color: rgba(0, 0, 0, 0.15); /* Softer shadow for light mode */
}

body.dark {
    --primary1: #bb86fc;
    --primary2: #c4a1ff;
    --primary3: #7e57c2;

    --background: #121212;
    --background2: #424242;
    --text: #cccccc;

    --important: #503d0c;
    --important2: #7a5f1f;
    --border: #222222;

    --header-bg: #1a1a1a;
    --header-text: #e0e0e0;
    --card-bg: #1e1e1e;
    --card-border: #333;
    --custom-card-bg: #263238; /* Darker grey-blue for custom chars */
    --custom-card-border: #37474f; /* Darker blue-grey for custom chars */
    --section-bg: #1e1e1e;
    --section-border: #333;
    --input-border: #333;
    --input-focus-border: #bb86fc;
    --script-output-bg: #282828;
    --script-output-narration-bg: rgba(255, 255, 255, 0.05);
    --script-output-text: #bbbbbb;
    --script-output-strong-text: #eeeeee;
    --selected-card-bg: #202b20;
    --selected-card-border: #27ae60;
    --selected-custom-card-bg: #1b5e20; /* Darker green for selected custom */
    --selected-custom-card-border: #388e3c; /* Stronger green border for selected custom */
    --selected-list-bg: #222222;
    --title-shadow-color: rgba(187, 134, 252, 0.3); /* Matches primary1, slightly transparent */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--background);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-character-form h4 {
    margin-bottom: 0.5rem;
    color: var(--header-text);
}