/* global_theme_css */

/* Base (Mixed) Theme Variables - Defined in :root */
:root {
    /* General */
    --body-bg: #f5f5f5; /* main-body, profile-body */
    --text-color: #333; /* Default text color for mixed theme */
    --card-bg: #ffffff; /* General card background */
    --border-color: #eee; /* General borders and separators */
    --input-border-color: #dddddd; /* Default for inputs */
    --input-text-color: #333333; /* Default for input text */
    --placeholder-color: #a0a0a0;
    --link-color: #0078d7; /* General link color */
    --h2-color: #333; /* Default H2 color (e.g., on landing, appearance) */
    --hover-overlay-bg: rgba(255, 255, 255, 0.1); /* For transparent buttons/tags hover */

    /* Image Source Variables - Define default/mixed theme images */
    --logo-image-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/logo?v=1730100247856g'); /* Default black logo */
    --menu-icon-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/Orangeia_Menu_icon-removebg-preview.png?v=1744630462994'); /* UPDATED for mixed theme */

    /* Buttons - General */
    --primary-button-bg: #0078d7;
    --primary-button-text: #ffffff;
    --secondary-button-bg: #e3e1e1;
    --secondary-button-text: #333;
    --black-button-bg: #000000;
    --black-button-text: #ffffff;
    --black-button-hover-bg: #333333; /* Darkest gray on hover */

    /* Navbar (Main App & Read) */
    --navbar-bg: #000000; /* Mixed Theme Navbar */
    --navbar-text: #ffffff;

    /* Sidebar */
    --sidebar-bg: #111111; /* Mixed theme sidebar */
    --sidebar-link-color: #666666;
    --sidebar-link-active-color: white;

    /* Profile Button (Main App Navbar) */
    --profile-button-bg: #000000;
    --profile-button-text: #ffffff;

    /* Upgrade Button (Main App Navbar & Dialogs) */
    --upgrade-button-bg: gold; /* Mixed Theme */
    --upgrade-button-text: black;
    --upgrade-button-hover-bg: #ffdb58; /* Slightly darker yellow on hover */

    /* Poem Card (Main App Discover/Followed) */
    --poem-card-border: 1px solid #dddddd;
    --poem-card-border-radius: 20px;
    --poem-card-bg: #ffffff;
    --poem-card-text: #444; /* Poem content text color */
    --poem-card-image-bg: #e0e0e0; /* Placeholder image background */
    --poet-name-color: #333;
    --time-ago-color: #555;
    --tag-button-bg: #ffffff;
    --tag-button-text: #555;

    /* Search Section */
    --search-bg: white;
    --search-main-text-color: #333;
    --search-by-text-color: #111;
    --search-option-bg: #f0f0f0;
    --search-option-text: #555;
    --search-option-active-bg: #333;
    --search-option-active-text: white;
    --search-input-border: 1px solid #ccc;
    --search-input-bg: #ffffff;
    --search-input-text: #333;
    --search-button-bg: #555;
    --search-button-text: white;
    --search-button-hover-bg: #333;

    /* Poet Cards (Suggested) */
    --poet-centre-card-bg: #ffffff; /* Mixed/Light theme for this card */
    --poet-centre-arrow-color: gray;
    --poet-centre-arrow-circle-bg: #474747;

    /* Create Poem Button (Main App) */
    --create-poem-button-bg: white;
    --create-poem-button-text: black;

    /* Editor (Create/Edit Poem) */
    --main-card-bg: #f9f9f9; /* for #text-editor, #edit-text-editor */
    --text-editor-text: #333; /* Default text color in editor for mixed theme */
    --editor-input-bg: #ffffff; /* for .editor-content input/textarea */
    --editor-input-border: 1px solid #dddddd;
    --editor-input-text: #333333;
    --publish-btn-bg: black;
    --publish-btn-text: white;
    --tag-container-label-color: #333; /* For labels next to checkboxes */
    --language-select-bg: black; /* Default value, likely will be overridden */
    --language-select-text: white; /* Default value, likely will be overridden */
    --back-btn-bg: #e0e0e0; /* Editor's back button */
    --back-btn-text: #333333;

    /* Poet Dashboard */
    --poem-list-bg: #ffffff; /* Mixed Theme: #f5f5f5 body, but poem-list in text says white */
    --poem-item-text: #333;

    /* Read Page Specific */
    --read-body-bg: #f0f0f0; /* Light gray for read body in mixed */
    --read-navbar-bg: #000000; /* Read page navbar for mixed */
    --read-profile-button-bg: #000000;
    --read-profile-button-text: #ffffff;
    --read-back-btn-bg: #bdc3c7; /* Read page back button */
    --read-back-btn-border: 1px solid #95a5a6;
    --read-back-btn-text: #333;
    --poem-reading-view-bg: #ffffff;
    --poem-reading-view-text: #444; /* Poem content */
    --read-h2-color: black;
    --read-poet-link-color: #006678;
    --read-tag-button-text: #333;
    --read-tag-button-bg: #e0e0e0;
    --action-buttons-bg: black; /* Action buttons below poem */
    --action-buttons-text: white;
    --action-buttons-hover-bg: #333;
    --comment-box-bg: #f0f0f0;
    --comment-input-bg: #ffffff;
    --comment-input-border: 1px solid #ccc;
    --comment-input-text: #333;
    --comment-button-bg: #2ecc71;
    --comment-button-text: white;
    --comment-button-hover-bg: #27ae60;
    --comment-bg: #ffffff;
    --comment-border: 1px solid #ddd;
    --comment-author-color: #34495e;
    --comment-date-color: #7f8c8d;
    --comment-nav-button-bg: #3498db;
    --comment-nav-button-text: white;
    --comment-nav-button-hover-bg: #2980b9;
    --report-header-color: #c0392b;
    --report-input-bg: #ffffff;
    --report-input-border: 1px solid #ccc;
    --report-input-text: #333;
    --report-submit-btn-bg: #e74c3c;
    --report-submit-btn-text: white;
    --report-submit-btn-hover-bg: #c0392b;
    --report-back-btn-bg: #bdc3c7;
    --report-back-btn-text: #333;
    --report-back-btn-border: 1px solid #95a5a6;
    --no-follows-message-text: #333;
    --discover-button-bg: #3498db;
    --discover-button-text: white;
    --discover-button-hover-bg: #2980b9;
    --add-to-fav-limit-dialog-bg: #fff;
    --add-to-fav-limit-dialog-text: #333;
    --add-to-fav-limit-dialog-warning-color: #f39c12;
    --add-to-fav-limit-dialog-upgrade-btn-bg: gold;
    --add-to-fav-limit-dialog-upgrade-btn-text: black;
    --add-to-fav-limit-dialog-upgrade-btn-hover-bg: #ffdb58;

    /* Profile Page Specific (Mixed Theme) */
    --header-bar-bg: #000000; /* Profile page header bar */
    --profile-back-btn-bg: #000000;
    --profile-back-btn-text: #ffffff;
    --profile-back-btn-border: 1px solid #ffffff;
    --profile-card-bg: #ffffff;
    --profile-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --profile-picture-border: 2px solid #ddd;
    --username-color: #1c1c1c;
    --follow-button-bg: #007bff;
    --follow-button-text: white;
    --follow-button-hover-bg: #0056b3;
    --report-user-button-bg: #e74c3c;
    --report-user-button-text: white;
    --report-user-button-hover-bg: #c0392b;
    --followers-following-text: #555;
    --followers-following-count-color: #1c1c1c;
    --details-view-text: #333;
    --toggle-button-color: #555;
    --toggle-button-hover-color: #333;
    --user-poem-item-border: 1px solid #dddddd; /* For poem cards in user profile */
    --user-poem-item-bg: #ffffff;
    --user-poem-item-text: #555;
    --user-poem-item-title-color: #1c1c1c;
    --report-user-container-bg: #ffffff;
    --report-user-container-header-color: #c0392b;
    --report-user-text: #555;
    --report-user-label-color: #555;
    --report-user-input-bg: #ffffff;
    --report-user-input-border: 1px solid #ccc;
    --report-user-input-text: #333;
    --report-user-submit-btn-bg: #e74c3c;
    --report-user-submit-btn-text: white;
    --report-user-submit-btn-hover-bg: #c0392b;
    --report-user-back-btn-bg: #bdc3c7;
    --report-user-back-btn-text: #333;
    --report-user-back-btn-border: 1px solid #95a5a6;

    /* Font Variables (Controlled by appearance.js via data-font on body) */
    --user-poem-title-font: 'DM Serif Display', serif; /* Default to DM Serif Display */
    --user-poem-content-font: 'DM Sans', sans-serif; /* Default to DM Sans */
}

/* Light Theme Overrides - Based on elysium elements themes.txt "Light Theme" section */
body[data-theme="light"] {
    /* General */
    --body-bg: #f5f5f5;
    --text-color: #333; /* Default text color for light theme */
    --card-bg: #ffffff; /* General card background */
    --border-color: #eee;
    --input-border-color: #dddddd;
    --input-text-color: #333333;
    --placeholder-color: #a0a0a0;
    --link-color: #0078d7; /* General link color */
    --h2-color: #333;

    /* Set image sources for light theme */
    --logo-image-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/ely-white.PNG?v=1745318914281');
    --menu-icon-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/Orangeia_Menu_icon__1_-removebg-preview.png?v=1745317620550');

    --hover-overlay-bg: rgba(0, 0, 0, 0.05); /* Lighter hover for light theme */

    /* Buttons - General (keeping original light theme settings) */
    --primary-button-bg: #0078d7;
    --primary-button-text: #ffffff;
    --secondary-button-bg: #e3e1e1;
    --secondary-button-text: #333;
    --black-button-bg: #000000;
    --black-button-text: #ffffff;
    --black-button-hover-bg: #333333;

    /* Navbar (Main App & Read) */
    --navbar-bg: white; /* Light Theme Navbar */
    --navbar-text: #333; /* Assuming dark text on white navbar */

    /* Sidebar */
    --sidebar-bg: #dbdbdb; /* Light theme sidebar */
    --sidebar-link-color: #919191;
    --sidebar-link-active-color: black;

    /* Profile Button (Main App Navbar) */
    --profile-button-bg: white;
    --profile-button-text: black;

    /* Upgrade Button (Main App Navbar & Dialogs) */
    --upgrade-button-bg: #ffea7c; /* Light Theme */
    --upgrade-button-text: black;
    --upgrade-button-hover-bg: #ffdb58;

    /* Poem Card (Main App Discover/Followed) */
    --poem-card-border: 1px solid #dddddd;
    --poem-card-border-radius: 20px;
    --poem-card-bg: #ffffff;
    --poem-card-text: #444; /* Poem content text color */
    --poem-card-image-bg: #e0e0e0;
    --poet-name-color: #333;
    --time-ago-color: #555;
    --tag-button-bg: #ffffff;
    --tag-button-text: #555;

    /* Search Section (Assuming same as mixed for now, unless specified) */
    --search-bg: white;
    --search-main-text-color: #333;
    --search-by-text-color: #111;
    --search-option-bg: #f0f0f0;
    --search-option-text: #555;
    --search-option-active-bg: #333;
    --search-option-active-text: white;
    --search-input-border: 1px solid #ccc;
    --search-input-bg: #ffffff;
    --search-input-text: #333;
    --search-button-bg: #555;
    --search-button-text: white;
    --search-button-hover-bg: #333;

    /* Poet Cards (Suggested) */
    --poet-centre-card-bg: white; /* Light Theme: white */
    --poet-centre-arrow-color: gray;
    --poet-centre-arrow-circle-bg: #f5f5f5; /* Light Theme: f5f5f5 for div surrounding arrow */

    /* Create Poem Button (Main App) */
    --create-poem-button-bg: white;
    --create-poem-button-text: black;

    /* Editor (Create/Edit Poem) */
    --main-card-bg: #f9f9f9;
    --text-editor-text: #333;
    --editor-input-bg: #ffffff;
    --editor-input-border: 1px solid #dddddd;
    --editor-input-text: #333333;
    --publish-btn-bg: black;
    --publish-btn-text: white;
    --tag-container-label-color: #333;
    --language-select-bg: white; /* Assuming light background for select in light theme */
    --language-select-text: black; /* Assuming dark text for select in light theme */
    --back-btn-bg: #e0e0e0;
    --back-btn-text: #333333;

    /* Poet Dashboard */
    --poem-list-bg: white; /* Light Theme: white */
    --poem-item-text: #333;

    /* Read Page Specific */
    --read-body-bg: #f0f0f0;
    --read-navbar-bg: white; /* Read page navbar for light */
    --read-profile-button-bg: white;
    --read-profile-button-text: black;
    --read-back-btn-bg: white; /* Read page back button */
    --read-back-btn-border: 1px solid #95a5a6;
    --read-back-btn-text: #333;
    --poem-reading-view-bg: #ffffff;
    --poem-reading-view-text: #444;
    --read-h2-color: black;
    --read-poet-link-color: #006678;
    --read-tag-button-text: #333;
    --read-tag-button-bg: #e0e0e0;
    --action-buttons-bg: white; /* Action buttons below poem */
    --action-buttons-text: #333333;
    --action-buttons-hover-bg: #cbcbcb;
    --comment-box-bg: #f0f0f0;
    --comment-input-bg: #ffffff;
    --comment-input-border: 1px solid #ccc;
    --comment-input-text: #333;
    --comment-button-bg: #2ecc71;
    --comment-button-text: white;
    --comment-button-hover-bg: #27ae60;
    --comment-bg: #ffffff;
    --comment-border: 1px solid #ddd;
    --comment-author-color: #34495e;
    --comment-date-color: #7f8c8d;
    --comment-nav-button-bg: #3498db;
    --comment-nav-button-text: white;
    --comment-nav-button-hover-bg: #2980b9;
    --report-header-color: #c0392b;
    --report-input-bg: #ffffff;
    --report-input-border: 1px solid #ccc;
    --report-input-text: #333;
    --report-submit-btn-bg: #e74c3c;
    --report-submit-btn-text: white;
    --report-submit-btn-hover-bg: #c0392b;
    --report-back-btn-bg: #bdc3c7;
    --report-back-btn-text: #333;
    --report-back-btn-border: 1px solid #95a5a6;
    --no-follows-message-text: #333;
    --discover-button-bg: #3498db;
    --discover-button-text: white;
    --discover-button-hover-bg: #2980b9;
    --add-to-fav-limit-dialog-bg: #fff;
    --add-to-fav-limit-dialog-text: #333;
    --add-to-fav-limit-dialog-warning-color: #f39c12;
    --add-to-fav-limit-dialog-upgrade-btn-bg: gold;
    --add-to-fav-limit-dialog-upgrade-btn-text: black;
    --add-to-fav-limit-dialog-upgrade-btn-hover-bg: #ffdb58;

    /* Profile Page Specific (Light Theme) */
    --header-bar-bg: white; /* Profile page header bar for light */
    --profile-back-btn-bg: white;
    --profile-back-btn-text: black;
    --profile-back-btn-border: 1px solid black;
    --profile-card-bg: #ffffff;
    --profile-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --profile-picture-border: 2px solid #ddd;
    --username-color: #1c1c1c;
    --follow-button-bg: #007bff;
    --follow-button-text: white;
    --follow-button-hover-bg: #0056b3;
    --report-user-button-bg: #e74c3c;
    --report-user-button-text: white;
    --report-user-button-hover-bg: #c0392b;
    --followers-following-text: #555;
    --followers-following-count-color: #1c1c1c;
    --details-view-text: #333;
    --toggle-button-color: #555;
    --toggle-button-hover-color: #333;
    --user-poem-item-border: 1px solid #dddddd;
    --user-poem-item-bg: #ffffff;
    --user-poem-item-text: #555;
    --user-poem-item-title-color: #1c1c1c;
    --report-user-container-bg: #ffffff;
    --report-user-container-header-color: #c0392b;
    --report-user-text: #555;
    --report-user-label-color: #555;
    --report-user-input-bg: #ffffff;
    --report-user-input-border: 1px solid #ccc;
    --report-user-input-text: #333;
    --report-user-submit-btn-bg: #e74c3c;
    --report-user-submit-btn-text: white;
    --report-user-submit-btn-hover-bg: #c0392b;
    --report-user-back-btn-bg: #bdc3c7;
    --report-user-back-btn-text: #333;
    --report-user-back-btn-border: 1px solid #95a5a6;
}

/* Dark Theme Overrides - Based on elysium elements themes.txt "Dark Theme" section */
body[data-theme="dark"] {
    /* General */
    --body-bg: black;
    --text-color: white; /* General text color in dark theme */
    --card-bg: #0e0e0e; /* Use 0e0e0e for general dark cards (poem-card, profile-card, dialogs) */
    --border-color: #444; /* Darker general border */
    --input-border-color: 0; /* No border for input */
    --input-text-color: white;
    --placeholder-color: #a0a0a0;
    --link-color: #0095ff; /* Specific poet-link color in dark theme */
    --h2-color: white;

    /* Set image sources for dark theme to default black versions */
    --logo-image-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/logo?v=1730100247856g');
    --menu-icon-src: url('https://cdn.glitch.global/e3414a7e-27dd-449a-8e4d-1ad4806a3384/Orangeia_Menu_icon-removebg-preview.png?v=1744630462994'); /* UPDATED for dark theme */

    --hover-overlay-bg: rgba(255, 255, 255, 0.1);

    /* Buttons - General */
    --primary-button-bg: #005bb5; /* Example: slightly darker blue for dark mode primary */
    --primary-button-text: #ffffff;
    --secondary-button-bg: #444;
    --secondary-button-text: #e0e0e0;
    --black-button-bg: #000000;
    --black-button-text: #ffffff;
    --black-button-hover-bg: #333333;

    /* Navbar (Main App & Read) */
    --navbar-bg: #141414;
    --navbar-text: white;

    /* Sidebar */
    --sidebar-bg: #111111;
    --sidebar-link-color: #919191;
    --sidebar-link-active-color: white; /* Active sidebar icon/text to white */

    /* Profile Button (Main App Navbar) */
    --profile-button-bg: #141414;
    --profile-button-text: white;

    /* Upgrade Button (Main App Navbar & Dialogs) - "same as default" */
    --upgrade-button-bg: gold;
    --upgrade-button-text: black;
    --upgrade-button-hover-bg: #ffdb58;

    /* Poem Card (Main App Discover/Followed) - APPLYING PROFILE PAGE STYLING */
    --poem-card-border: 0px; /* "border 0px" - MATCHING PROFILE */
    --poem-card-border-radius: 20px;
    --poem-card-bg: #0e0e0e; /* MATCHING PROFILE */
    --poem-card-text: white; /* MATCHING PROFILE */
    --poem-card-image-bg: #222; /* Darker placeholder for dark cards */
    --poet-name-color: white; /* MATCHING PROFILE */
    --time-ago-color: #737373; /* MATCHING PROFILE */
    --tag-button-bg: #141414; /* CHANGED: Tag button background within poem card */
    --tag-button-text: #838383; /* Tag button text within poem card - MATCHING PROFILE */

    /* Search Section */
    --search-bg: black;
    --search-main-text-color: white;
    --search-by-text-color: white;
    --search-option-bg: black;
    --search-option-text: #ffffff;
    --search-option-active-bg: #ffffff;
    --search-option-active-text: black;
    --search-input-border: 0;
    --search-input-bg: #141414;
    --search-input-text: white;
    --search-button-bg: #555;
    --search-button-text: white;
    --search-button-hover-bg: #333;

    /* Poet Cards (Suggested) */
    --poet-centre-card-bg: #232323; /* Poet center card background */
    --poet-centre-arrow-color: gray;
    --poet-centre-arrow-circle-bg: #474747;

    /* Create Poem Button (Main App) */
    --create-poem-button-bg: white;
    --create-poem-button-text: black;

    /* Editor (Create/Edit Poem) */
    --main-card-bg: #0c0c0c; /* for #main-card, #text-editor */
    --text-editor-text: white;
    --editor-input-bg: #0e0e0e;
    --editor-input-border: 0;
    --editor-input-text: white;
    --publish-btn-bg: white;
    --publish-btn-text: black;
    --tag-container-label-color: white;
    --language-select-bg: black;
    --language-select-text: white;
    --back-btn-bg: #141414;
    --back-btn-text: white;

    /* Poet Dashboard */
    --poem-list-bg: #0e0e0e; /* Adjust to dark background for poem list container */
    --poem-item-text: white;

    /* Read Page Specific */
    --read-body-bg: black; /* Read page body background to black */
    --read-navbar-bg: #141414; /* Remains #141414 */
    --read-profile-button-bg: #141414;
    --read-profile-button-text: white;
    --read-back-btn-bg: #141414;
    --read-back-btn-border: 0px;
    --read-back-btn-text: white;
    --poem-reading-view-bg: #0e0e0e; /* Poem reading card background to #0e0e0e */
    --poem-reading-view-text: white;
    --read-h2-color: white;
    --read-poet-link-color: #0095ff;
    --read-tag-button-text: #838383;
    --read-tag-button-bg: #080808;
    --action-buttons-bg: #141414;
    --action-buttons-text: white;
    --action-buttons-hover-bg: #333;
    --comment-box-bg: #1a1a1a;
    --comment-input-bg: #0e0e0e;
    --comment-input-border: 1px solid #444;
    --comment-input-text: white;
    --comment-button-bg: #2ecc71;
    --comment-button-text: white;
    --comment-button-hover-bg: #27ae60;
    --comment-bg: #1a1a1a;
    --comment-border: 1px solid #444;
    --comment-author-color: #60a5fa;
    --comment-date-color: #737373;
    --comment-nav-button-bg: #3498db;
    --comment-nav-button-text: white;
    --comment-nav-button-hover-bg: #2980b9;
    --report-header-color: #e74c3c;
    --report-input-bg: #0e0e0e;
    --report-input-border: 1px solid #444;
    --report-input-text: white;
    --report-submit-btn-bg: #e74c3c;
    --report-submit-btn-text: white;
    --report-submit-btn-hover-bg: #c0392b;
    --report-back-btn-bg: #141414;
    --report-back-btn-text: white;
    --report-back-btn-border: 0px;
    --no-follows-message-text: white;
    --discover-button-bg: #3498db;
    --discover-button-text: white;
    --discover-button-hover-bg: #2980b9;
    --add-to-fav-limit-dialog-bg: #0e0e0e;
    --add-to-fav-limit-dialog-text: white;
    --add-to-fav-limit-dialog-warning-color: #f39c12;
    --add-to-fav-limit-dialog-upgrade-btn-bg: gold;
    --add-to-fav-limit-dialog-upgrade-btn-text: black;
    --add-to-fav-limit-dialog-upgrade-btn-hover-bg: #ffdb58;

    /* Profile Page Specific (Dark Theme) */
    --header-bar-bg: #141414;
    --profile-back-btn-bg: #141414;
    --profile-back-btn-text: white;
    --profile-back-btn-border: 0px;
    --profile-card-bg: #0e0e0e;
    --profile-card-shadow: none;
    --profile-picture-border: 2px solid #555;
    --username-color: white;
    --follow-button-bg: #007bff;
    --follow-button-text: white;
    --follow-button-hover-bg: #0056b3;
    --report-user-button-bg: #e74c3c;
    --report-user-button-text: white;
    --report-user-button-hover-bg: #c0392b;
    --followers-following-text: #a0a0a0;
    --followers-following-count-color: white;
    --details-view-text: #e0e0e0;
    --toggle-button-color: #a0a0a0;
    --toggle-button-hover-color: white;
    --user-poem-item-border: 0px;
    --user-poem-item-bg: #0e0e0e;
    --user-poem-item-text: white;
    --user-poem-item-title-color: white;
    --report-user-container-bg: #0e0e0e;
    --report-user-container-header-color: #e74c3c;
    --report-user-text: white;
    --report-user-label-color: #a0a0a0;
    --report-user-input-bg: #1a1a1a;
    --report-user-input-border: 1px solid #444;
    --report-user-input-text: white;
    --report-user-submit-btn-bg: #e74c3c;
    --report-user-submit-btn-text: white;
    --report-user-submit-btn-hover-bg: #c0392b;
    --report-user-back-btn-bg: #141414;
    --report-user-back-btn-text: white;
    --report-user-back-btn-border: 0px;
}

/* Common Styles Applying Variables (keep these in global_theme_css to ensure themes work) */

body {
    font-family: 'DM Sans', sans-serif; /* Base font */
    background-color: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply to general headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--h2-color);
    transition: color 0.3s ease;
}


.menu-icon { /* This class is on the toggleSidebar element */
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
    background-image: var(--menu-icon-src);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: none; /* Ensure no filter is applied here */
    transition: background-image 0.3s ease;
}


.navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar {
    background-color: var(--sidebar-bg);
    transition: background-color 0.3s ease;
}
.tab-link {
    color: var(--sidebar-link-color);
    transition: color 0.3s ease;
}
.tab-link.active {
    color: var(--sidebar-link-active-color);
}

.profile-button {
    background-color: var(--profile-button-bg);
    color: var(--profile-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.upgrade-button {
    background-color: var(--upgrade-button-bg);
    color: var(--upgrade-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.upgrade-button:hover {
    background-color: var(--upgrade-button-hover-bg);
}

.poem-card {
    border: var(--poem-card-border);
    border-radius: var(--poem-card-border-radius);
    background-color: var(--poem-card-bg);
    color: var(--poem-card-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.poem-card .poet-name {
    color: var(--poet-name-color);
    transition: color 0.3s ease;
}
.poem-card .time-ago {
    color: var(--time-ago-color);
    transition: color 0.3s ease;
}
.poem-card .tag-button {
    background-color: var(--tag-button-bg);
    color: var(--tag-button-text);
    border: var(--poem-card-border); /* Tags inside poem cards use poem-card border */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.poem-card-image {
    background-color: var(--poem-card-image-bg);
    transition: background-color 0.3s ease;
}

.black-button {
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.black-button:hover {
    background-color: var(--black-button-hover-bg);
}

.poet-card { /* For suggested poet cards (main app) and profile card */
    background-color: var(--poet-centre-card-bg);
    color: var(--text-color); /* General text color for this card */
    border: 1px solid var(--border-color); /* General border */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.poet-card .poet-name {
    color: var(--poet-name-color);
}
.poet-card .poet-username {
    color: var(--time-ago-color); /* Use time-ago for consistent lighter text */
}
.poet-card .fa-solid.fa-arrow-right { /* Specific icon within poet card */
    color: var(--poet-centre-arrow-color);
    transition: color 0.3s ease;
}
.poet-card .circle-surrounding-arrow { /* Assuming a class for the circle, or apply to parent div */
    background-color: var(--poet-centre-arrow-circle-bg);
    transition: background-color 0.3s ease;
}


/* Create button on main page */
#create-poem-button {
    background-color: var(--create-poem-button-bg);
    color: var(--create-poem-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Editor (Create/Edit Poem) */
#text-editor, #edit-text-editor {
    background-color: var(--main-card-bg);
    color: var(--text-editor-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.editor-content input[type="text"],
.editor-content textarea {
    background-color: var(--editor-input-bg);
    color: var(--editor-input-text);
    border: var(--editor-input-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.editor-content select { /* Assuming select uses similar styling to inputs */
    background-color: var(--language-select-bg);
    color: var(--language-select-text);
    border: var(--editor-input-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#publish-btn, #update-btn {
    background-color: var(--publish-btn-bg);
    color: var(--publish-btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.editor-content label {
    color: var(--tag-container-label-color);
    transition: color 0.3s ease;
}
#back-btn { /* Editor's specific back button */
    background-color: var(--back-btn-bg);
    color: var(--back-btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Search page */
#search {
    background-color: var(--search-bg);
    transition: background-color 0.3s ease;
}
.search-container-wrapper {
    color: var(--search-main-text-color);
    transition: color 0.3s ease;
}
.search-by-text {
    color: var(--search-by-text-color);
    transition: color 0.3s ease;
}
.search-option {
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid var(--border-color); /* Use general border for non-active */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.search-option.active {
    background-color: var(--search-option-active-bg);
    color: var(--search-option-active-text);
    border-color: var(--search-option-active-bg);
}
#searchInput {
    background-color: var(--search-input-bg);
    color: var(--search-input-text);
    border: var(--search-input-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#performSearch {
    background-color: var(--search-button-bg);
    color: var(--search-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#performSearch:hover {
    background-color: var(--search-button-hover-bg);
}

/* Poet Dashboard list */
#poem-list {
    border: 1px solid var(--border-color);
    background-color: var(--poem-list-bg); /* Apply background to list container */
    transition: border 0.3s ease, background-color 0.3s ease;
}
.poem-item {
    color: var(--poem-item-text);
    border-bottom: 1px solid var(--border-color);
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

/* Navigation buttons (up/down) */
#nav-up-button, #nav-down-button {
    background-color: var(--black-button-bg);
    color: var(--black-button-text);
    border: 1px solid var(--black-button-bg);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#nav-up-button:hover, #nav-down-button:hover {
    background-color: var(--black-button-hover-bg);
    border-color: var(--black-button-hover-bg);
}

/* Read Page */
body.read-page { /* Apply specific styles to the body when on read page */
    background-color: var(--read-body-bg);
    transition: background-color 0.3s ease;
}
body.read-page .navbar { /* Read page navbar specific background */
    background-color: var(--read-navbar-bg);
}
body.read-page .profile-button { /* Read page profile button */
    background-color: var(--read-profile-button-bg);
    color: var(--read-profile-button-text);
}

#poem-reading-view {
    background-color: var(--poem-reading-view-bg);
    color: var(--poem-reading-view-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#poem-reading-view h2 {
    color: var(--read-h2-color); /* Specific H2 color for read page */
    transition: color 0.3s ease;
}
#poem-reading-view .poet-link {
    color: var(--read-poet-link-color);
    transition: color 0.3s ease;
}
#poem-reading-view .tag-buttons button {
    background-color: var(--read-tag-button-bg);
    color: var(--read-tag-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#action-buttons button {
    background-color: var(--action-buttons-bg);
    color: var(--action-buttons-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#action-buttons button:hover {
    background-color: var(--action-buttons-hover-bg);
}
#comment-box {
    background-color: var(--comment-box-bg);
    transition: background-color 0.3s ease;
}
#comment-box textarea {
    background-color: var(--comment-input-bg);
    border: var(--comment-input-border);
    color: var(--comment-input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#comment-box textarea:focus {
    outline: none;
    border-color: var(--link-color); /* Use general link color for focus border */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25); /* Keeping hardcoded for shadow opacity */
}
#comment-box button {
    background-color: var(--comment-button-bg);
    color: var(--comment-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#comment-box button:hover {
    background-color: var(--comment-button-hover-bg);
}
#comments-container {
    margin-top: 15px;
    border-top: 1px solid var(--border-color); /* Use general border color */
    padding-top: 10px;
    transition: border-top-color 0.3s ease;
}
.comment {
    background-color: var(--comment-bg);
    border: var(--comment-border);
    transition: background-color 0.3s ease, border 0.3s ease;
}
.comment-author {
    color: var(--comment-author-color);
    transition: color 0.3s ease;
}
.comment-date {
    color: var(--comment-date-color);
    transition: color 0.3s ease;
}
#comment-navigation button {
    background-color: var(--comment-nav-button-bg);
    color: var(--comment-nav-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#comment-navigation button:hover {
    background-color: var(--comment-nav-button-hover-bg);
}
#comment-navigation button:disabled {
    background-color: var(--secondary-button-bg); /* Use secondary or disabled color */
    color: var(--secondary-button-text);
    cursor: not-allowed;
}

.hidden {
    display: none;
}

.loading {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 20px;
    color: var(--text-color); /* Use general text color */
}

.error {
    color: var(--message-box-error-text); /* Use error text color from message box */
    text-align: center;
    font-size: 1.2rem;
    margin-top: 20px;
}
#comment-options-menu {
    background-color: var(--card-bg); /* Use general card bg */
    border: 1px solid var(--border-color); /* Use general border */
    padding: 5px;
    z-index: 100;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Keeping hardcoded for opacity */
    min-width: 100px;
    display: none;
    position: absolute;
    color: var(--text-color); /* General text color for menu items */
}
#comment-options-menu div {
    cursor: pointer;
    padding: 5px;
}
#comment-options-menu div:hover {
    background-color: var(--hover-overlay-bg); /* Use hover overlay bg */
}

#comment-details-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--card-bg); /* Use general card bg */
    border: 1px solid var(--border-color); /* Use general border */
    padding: 20px;
    z-index: 101;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Keeping hardcoded for opacity */
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    display: none;
    color: var(--text-color); /* General text color */
}
#comment-details-dialog h3 {
    margin-top: 0;
    color: var(--h2-color); /* Use general h2 color */
}
#comment-details-dialog .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--time-ago-color); /* Use time ago color for consistency */
}
#comment-details-dialog .close-button:hover {
    color: var(--text-color); /* Hover color from general text */
}
#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* This is a fixed overlay, usually dark */
    z-index: 100;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Visible class for dialog overlay */
#dialog-overlay.visible {
    visibility: visible;
    opacity: 1;
}

#report-poem-container,
#report-comment-container {
    background-color: var(--card-bg); /* Use general card bg */
    border-radius: 12px;
    box-shadow: var(--poem-card-shadow); /* Use poem card shadow for consistency */
    padding: 20px;
    margin: 20px auto;
    max-width: 80%;
    text-align: left;
    display: none;
    color: var(--text-color); /* General text color */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
#report-poem-container h3,
#report-comment-container h3 {
    margin-top: 0;
    color: var(--report-header-color); /* Use report header color */
    transition: color 0.3s ease;
}
#report-poem-container textarea,
#report-comment-container textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    /* Use report-input variables */
    border: var(--report-input-border);
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical;
    background-color: var(--report-input-bg);
    color: var(--report-input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#report-poem-container button,
#report-comment-container button {
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-right: 10px;
}
#report-poem-container #submit-poem-report-btn,
#report-comment-container #submit-report-btn {
    /* Use report-submit-btn variables */
    background-color: var(--report-submit-btn-bg);
    color: var(--report-submit-btn-text);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#report-poem-container #submit-poem-report-btn:hover,
#report-comment-container #submit-report-btn:hover {
    background-color: var(--report-submit-btn-hover-bg);
}
#report-poem-container #back-to-poem-view,
#report-comment-container #back-to-reading-view {
    /* Use report-back-btn variables */
    background-color: var(--report-back-btn-bg);
    color: var(--report-back-btn-text);
    border: var(--report-back-btn-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#report-poem-container #back-to-poem-view:hover,
#report-comment-container #back-to-reading-view:hover {
    background-color: var(--report-back-btn-hover-bg); /* Add hover var or set directly */
    filter: brightness(0.9);
}

#no-follows-message {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 50px;
    display: none;
    color: var(--no-follows-message-text); /* Use variable */
    transition: color 0.3s ease;
}
#no-follows-message button {
    /* Use discover-button variables */
    background-color: var(--discover-button-bg);
    color: var(--discover-button-text);
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#no-follows-message button:hover {
    background-color: var(--discover-button-hover-bg);
}

.poem-limit-dialog-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* This is an overlay, fixed */
}
.poem-limit-dialog {
    background-color: var(--add-to-fav-limit-dialog-bg);
    color: var(--add-to-fav-limit-dialog-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.poem-limit-dialog h4 {
    color: var(--add-to-fav-limit-dialog-warning-color);
}
.poem-limit-dialog p {
    color: var(--add-to-fav-limit-dialog-text);
}
.poem-limit-dialog .upgrade-button {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-bg);
    color: var(--add-to-fav-limit-dialog-upgrade-btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.poem-limit-dialog .upgrade-button:hover {
    background-color: var(--add-to-fav-limit-dialog-upgrade-btn-hover-bg);
}

/* Profile Page */
body.profile-page { /* Add a class to body for profile page if needed for global overrides */
    background-color: var(--body-bg); /* Use general body bg for profile */
    color: var(--text-color); /* Use general text color for profile */
}
.header-bar {
    background-color: var(--header-bar-bg);
    transition: background-color 0.3s ease;
}
.header-bar .logo { /* Logo within profile header bar */
    background-image: var(--logo-image-src); /* Use background-image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    filter: none; /* Ensure no filter is applied here */
    transition: background-image 0.3s ease;
}
.profile-page .menu-icon { /* Specific to profile page, if present */
    background-image: var(--menu-icon-src);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
    transition: background-image 0.3s ease;
}

.back-button { /* Profile page back button specific */
    background-color: var(--profile-back-btn-bg);
    color: var(--profile-back-btn-text);
    border: var(--profile-back-btn-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.profile-card {
    background-color: var(--profile-card-bg);
    box-shadow: var(--profile-card-shadow);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.profile-picture {
    border: var(--profile-picture-border);
    transition: border 0.3s ease;
}
.card-content h3 { /* Username in profile card */
    color: var(--username-color);
    transition: color 0.3s ease;
}
.follow-button {
    background-color: var(--follow-button-bg);
    color: var(--follow-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.follow-button:hover {
    background-color: var(--follow-button-hover-bg);
}
.report-button { /* Report user button on profile page */
    background-color: var(--report-user-button-bg);
    color: var(--report-user-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.report-button:hover {
    background-color: var(--report-user-button-hover-bg);
}
.followers-following {
    color: var(--followers-following-text);
    transition: color 0.3s ease;
}
.followers-following p:first-child { /* The count numbers */
    color: var(--followers-following-count-color);
    transition: color 0.3s ease;
}
.followers-following.details-view {
    color: var(--details-view-text);
    transition: color 0.3s ease;
}
.toggle-button {
    color: var(--toggle-button-color);
    transition: color 0.3s ease;
}
.toggle-button:hover {
    color: var(--toggle-button-hover-color);
}
.user-poem-item {
    border: var(--user-poem-item-border);
    background-color: var(--user-poem-item-bg);
    color: var(--user-poem-item-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.user-poem-item .poem-title {
    color: var(--user-poem-item-title-color);
    transition: color 0.3s ease;
}
#report-user-container {
    background-color: var(--report-user-container-bg);
    color: var(--report-user-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#report-user-container h3 {
    color: var(--report-user-container-header-color);
    transition: color 0.3s ease;
}
#report-user-container label {
    color: var(--report-user-label-color);
    transition: color 0.3s ease;
}
#report-user-container textarea {
    background-color: var(--report-user-input-bg);
    border: var(--report-user-input-border);
    color: var(--report-user-input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
#report-user-container #submit-user-report-btn {
    background-color: var(--report-user-submit-btn-bg);
    color: var(--report-user-submit-btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
#report-user-container #submit-user-report-btn:hover {
    background-color: var(--report-user-submit-btn-hover-bg);
}
#report-user-container #back-to-profile {
    background-color: var(--report-user-back-btn-bg);
    color: var(--report-user-back-btn-text);
    border: var(--report-user-back-btn-border);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

/* Account Page */
body.account-page { /* Add a class to body for account page if needed for global overrides */
    background-color: var(--body-bg); /* Use general body bg for account */
    color: var(--text-color); /* Use general text color for account */
}
.account-card { /* General card on account page */
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.profile-info p {
    color: var(--profile-info-text); /* Use a specific variable if this needs to change */
}
.profile-input { /* Inputs in edit mode */
    border-bottom: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    transition: border-bottom-color 0.3s ease, color 0.3s ease;
}
.profile-input::placeholder {
    color: var(--placeholder-color);
}
.profile-input:focus {
    border-bottom-color: var(--link-color);
}
.tag { /* Tags on preferences (account/setup) */
    border: 1.5px solid var(--tag-border);
    background-color: transparent;
    color: var(--tag-text);
    transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.tag.selected {
    background-color: var(--tag-selected-bg);
    color: var(--tag-selected-text);
    border-color: var(--tag-selected-bg);
}
.tag:hover:not(.selected) {
    background-color: var(--hover-overlay-bg);
}

/* Action buttons on account page */
.action-buttons button { /* General action button on account page */
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.action-buttons button:hover {
    background-color: var(--card-bg); /* Lighter on hover */
}
#changePasswordSubmitButton {
    border-color: var(--link-color);
    color: var(--link-color);
    background-color: transparent;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
#changePasswordSubmitButton:hover {
    background-color: rgba(0, 120, 215, 0.1);
}
#log-out-button, #del-account {
    color: #ff4747; /* Keeping red for danger, can be generalized to a danger variable */
}
.edit-profile-button {
    border-color: var(--link-color);
    color: var(--link-color);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.edit-profile-button:hover {
    background-color: rgba(0, 120, 215, 0.1);
}
.save-changes-button {
    border-color: var(--success-message-bg); /* Assuming these are success/error colors, defined elsewhere if needed */
    color: var(--success-message-bg);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.save-changes-button:hover {
    background-color: rgba(76, 175, 80, 0.1);
}
.discard-changes-button {
    border-color: var(--error-message-bg);
    color: var(--error-message-bg);
    transition: border-color 0.3s ease, color 0.3s ease;
}

/* Cropping Modal */
.cropping-modal {
    background-color: rgba(0, 0, 0, 0.8);
}
.cropping-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.cropping-modal .buttons .crop-button {
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.cropping-modal .buttons .crop-button:hover {
    background-color: var(--link-color); /* Darker blue */
}
.cropping-modal .buttons .cancel-crop-button {
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.cropping-modal .buttons .cancel-crop-button:hover {
    background-color: var(--border-color); /* Lighter gray */
}

/* Back button - General styling on pages like Welcome, Setup, Account */
.back-button {
    color: var(--placeholder-color);
    transition: color 0.3s ease;
}
.back-button:hover {
    color: var(--text-color);
}

/* Message Box */
.message-box {
    background-color: var(--error-message-bg); /* Assuming this is an error color */
    color: var(--primary-button-text); /* Use primary button text color for message box text */
    transition: background-color 0.3s ease, color 0.3s ease;
}
.message-box.success {
    background-color: var(--success-message-bg); /* Assuming this is a success color */
}

/* Welcome & Setup Pages */
body.welcome-page, body.setup-page { /* Apply to welcome and setup pages */
    background: linear-gradient(to bottom, #1a1a1a, #000000); /* Fixed gradient for these pages */
    color: #ffffff; /* Fixed text color for these pages */
}
body.welcome-page h2, body.setup-page h2 {
    color: #ffffff; /* Fixed white heading color */
}
body.welcome-page .logo, body.setup-page .logo {
    background-image: var(--logo-image-src); /* Use background-image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    filter: none; /* No filter for logo on these fixed-background pages */
}
.input-group input {
    border-bottom: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    transition: border-bottom-color 0.3s ease, color 0.3s ease;
}
.input-group input::placeholder {
    color: var(--placeholder-color);
}
.input-group input:focus {
    border-bottom-color: var(--text-color); /* White line on focus for dark background */
}
.auth-button { /* Base for transparent buttons like "Sign Up" and "Log In" on welcome page */
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.auth-button:hover {
    background-color: var(--hover-overlay-bg);
}
.white-filled-button { /* Specific style for "Next" and "Save Profile" buttons */
    background-color: white;
    color: black;
}
.white-filled-button:hover {
    background-color: #f0f0f0;
}
.username-status {
    color: var(--placeholder-color); /* Default status text color */
}
.username-status.available { /* Green for available */
    color: #4CAF50;
}
.username-status.taken { /* Red for taken */
    color: #F44336;
}
.tag { /* Tags on setup page */
    border: 1px solid var(--tag-border);
    background-color: transparent;
    color: var(--tag-text);
    transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.tag.selected {
    background-color: var(--tag-selected-bg);
    color: var(--tag-selected-text);
    border-color: var(--tag-selected-bg);
}
.tag:hover:not(.selected) {
    background-color: rgba(255, 255, 255, 0.1);
}
.preferences-prompt {
    color: var(--placeholder-color); /* Use placeholder color for prompts */
}

/* Appearance Page */
body.appearance-page { /* Add a class to body for appearance page if needed for global overrides */
    background-color: var(--body-bg);
    color: var(--text-color);
}
.settings-section {
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.settings-section h2 {
    color: var(--h2-color);
}
.theme-card {
    border: 2px solid var(--border-color);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.theme-card.selected {
    border-color: var(--primary-button-bg);
    box-shadow: 0 0 0 3px var(--primary-button-bg);
}
.theme-name {
    color: var(--text-color);
    background-color: var(--card-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.theme-preview {
    border-bottom: 1px solid var(--border-color);
}
.font-button {
    background-color: var(--secondary-button-bg);
    color: var(--secondary-button-text);
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.font-button.selected {
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
    border-color: var(--primary-button-bg);
}
.font-button:hover:not(.selected) {
    background-color: rgba(0,0,0,0.05); /* Slight hover for unselected */
    border-color: var(--primary-button-bg);
    color: var(--primary-button-bg);
}