/* Global Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* Base Theme Variables - Sharp & Muted for Smaller/Low-Res Screens */
:root {
    /* Base theme colors: Muted yet clear */
    --theme-primary: #4A5568; /* Muted Slate Blue/Gray - Professional & Understated */
    --theme-bg: #F7FAFC; /* Very Light Cool Gray - Clean & Sharp Background */
    --theme-text: #2D3748; /* Dark Cool Gray - High Contrast Text */
    --theme-accent: rgba(74, 85, 104, 0.1); /* Subtle accent derived from primary */
    --theme-border: rgba(74, 85, 104, 0.2); /* Muted border */
    --theme-hover: rgba(74, 85, 104, 0.15); /* Muted hover */
    /* Aliases for convenience */
    --accent: var(--theme-primary);
    --accent-light: var(--theme-accent);
    --dark: var(--theme-text);
    --light: var(--theme-bg);
    --gray: #A0AEC0; /* Muted Mid-Gray */
    /* Structural colors that don't change with theme */
    --border: #CBD5E0; /* Lighter Muted Gray for general borders */
    /* Spacing */
    --space-sm: 0.5rem;
    --space: 1rem;
    --space-lg: 2rem;
    /* Typography */
    --text-sm: 0.875rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
}

    :root[data-theme="black-white"] {
        --theme-primary: #333333; /* Sharp Dark Gray - for primary actions/accents */
        --theme-bg: #FFFFFF; /* Pure White - for maximum background sharpness */
        --theme-text: #1A1A1A; /* Very Dark Gray/Near Black - for sharp text */
        --theme-accent: rgba(51, 51, 51, 0.1); /* Light gray accent */
        --theme-border: rgba(51, 51, 51, 0.25); /* Slightly darker gray for borders */
        --theme-hover: rgba(51, 51, 51, 0.15); /* Light gray for hover states */
        /* Other grays if needed by specific components, but these cover the core */
    }

    /* Updated Theme Variations with Sharp & Muted Color Alignment */
    :root[data-theme="creative"] {
        --theme-primary: #5A5F80; /* Muted Lavender Gray - Subdued Creativity */
        --theme-bg: #F8F8FB; /* Very Pale Lavender-White */
        --theme-text: #3C3E50; /* Dark Muted Purple-Gray */
        --theme-accent: rgba(90, 95, 128, 0.15);
        --theme-border: rgba(90, 95, 128, 0.25);
        --theme-hover: rgba(90, 95, 128, 0.2);
    }

    :root[data-theme="cozy"] {
        --theme-primary: #707C74; /* Muted Sage Green - Soft Comfort */
        --theme-bg: #F9FAF8; /* Very Light Off-White with Greenish Tint */
        --theme-text: #454C47; /* Dark Muted Green-Gray */
        --theme-accent: rgba(112, 124, 116, 0.15);
        --theme-border: rgba(112, 124, 116, 0.25);
        --theme-hover: rgba(112, 124, 116, 0.2);
    }

    :root[data-theme="energetic"] {
        --theme-primary: #A65B5B; /* Muted Terracotta/Rust - Grounded Energy */
        --theme-bg: #FCF8F8; /* Very Pale Rosy White */
        --theme-text: #5A3E3E; /* Dark Muted Brown-Red */
        --theme-accent: rgba(166, 91, 91, 0.15);
        --theme-border: rgba(166, 91, 91, 0.25);
        --theme-hover: rgba(166, 91, 91, 0.2);
    }

    :root[data-theme="mindful"] {
        --theme-primary: #52707C; /* Muted Dusty Blue - Calm Reflection */
        --theme-bg: #F7FAFB; /* Very Light Cool Off-White */
        --theme-text: #38474F; /* Dark Muted Blue-Gray */
        --theme-accent: rgba(82, 112, 124, 0.15);
        --theme-border: rgba(82, 112, 124, 0.25);
        --theme-hover: rgba(82, 112, 124, 0.2);
    }

    :root[data-theme="focused"] {
        --theme-primary: #4C5F7A; /* Muted Steel Blue - Serious Focus */
        --theme-bg: #F7F9FC; /* Very Light Cool Gray */
        --theme-text: #354152; /* Darker Muted Blue-Gray */
        --theme-accent: rgba(76, 95, 122, 0.15);
        --theme-border: rgba(76, 95, 122, 0.25);
        --theme-hover: rgba(76, 95, 122, 0.2);
    }

    :root[data-theme="calm"] {
        --theme-primary: #6B7A8F; /* Muted Cadet Blue - Quiet Calmness */
        --theme-bg: #F9FAFB; /* Very Pale Cool Blue-White */
        --theme-text: #424A57; /* Dark Muted Blue-Gray */
        --theme-accent: rgba(107, 122, 143, 0.12);
        --theme-border: rgba(107, 122, 143, 0.22);
        --theme-hover: rgba(107, 122, 143, 0.17);
    }

    :root[data-theme="positive"] {
        --theme-primary: #788464; /* Muted Olive Drab - Subdued Positivity */
        --theme-bg: #FAFBF8; /* Very Light Warm Off-White */
        --theme-text: #4A503F; /* Dark Muted Olive-Gray */
        --theme-accent: rgba(120, 132, 100, 0.15);
        --theme-border: rgba(120, 132, 100, 0.25);
        --theme-hover: rgba(120, 132, 100, 0.2);
    }

/* Global Styles */
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header Controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mood Trigger Styles */
.mood-trigger-container {
    position: relative;
}

.mood-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background-color: transparent;
    color: var(--theme-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

    .mood-trigger:hover {
        transform: scale(1.05);
        background-color: var(--theme-hover); /* Use theme-hover for background */
        /* color: var(--theme-primary); /* Color might not need to change if hover bg is subtle */
    }

.mood-emoji {
    font-size: var(--text-xl);
    line-height: 1;
}

/* Mood Overlay */
.mood-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(30, 30, 30, 0.65); /* Darker, slightly desaturated overlay */
    z-index: 1000;
}

    .mood-overlay.active {
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* Mood Dialog */
.mood-dialog {
    background-color: var(--theme-bg); /* Dialog uses theme background */
    color: var(--theme-text);
    border-radius: 1rem;
    padding: var(--space-lg);
    max-width: 32rem;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--theme-border); /* Add a subtle border for definition */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Softer shadow */
}

.mood-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.mood-title {
    color: var(--theme-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.mood-subtitle {
    color: var(--theme-text);
    font-size: var(--text-sm);
    opacity: 0.75; /* Slightly increased opacity for better readability of muted text */
}

/* Mood Options */
.mood-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space);
    margin-bottom: var(--space-lg);
}

.mood-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space);
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    background-color: var(--theme-bg); /* Can use theme-bg or a slightly lighter variant */
    /* For very light theme-bg, consider a slightly off-white like #FEFEFE or var(--light) if it's distinct enough */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .mood-button:hover {
        background-color: var(--theme-hover);
        border-color: var(--theme-primary); /* Primary color border on hover for clarity */
        transform: translateY(-2px);
    }

    .mood-button.selected {
        background-color: var(--theme-accent);
        border-color: var(--theme-primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary) 70%, transparent); /* Muted shadow */
    }

    .mood-button .mood-emoji {
        font-size: 1.2rem;
        margin-bottom: var(--space-sm);
    }

    .mood-button .mood-label {
        font-weight: 500;
        padding: 0 5px;
        color: var(--theme-text);
    }

    .mood-button .mood-description {
        font-size: var(--text-sm);
        padding: 0 37px;
        color: var(--theme-text);
        opacity: 0.75; /* Consistent with subtitle opacity */
    }

/* Mood Controls */
.mood-controls {
    display: flex;
    gap: var(--space);
    justify-content: center;
}

.mood-continue,
.mood-skip {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mood-continue {
    background-color: var(--theme-primary);
    color: var(--theme-bg); /* Use theme background for text for max contrast with muted primary */
    border-color: var(--theme-primary);
}

    .mood-continue:hover {
        background-color: color-mix(in srgb, var(--theme-primary) 85%, var(--dark) 15%); /* Slightly darken muted primary */
        border-color: color-mix(in srgb, var(--theme-primary) 85%, var(--dark) 15%);
        color: var(--theme-bg);
    }

    .mood-continue:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: var(--gray);
        border-color: var(--gray);
        color: color-mix(in srgb, var(--theme-text) 70%, var(--theme-bg) 30%);
    }

.mood-skip {
    background-color: transparent;
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
}

    .mood-skip:hover {
        background-color: var(--theme-accent);
        border-color: var(--theme-primary); /* Keep border related to primary */
        color: var(--theme-primary); /* Text becomes primary color */
    }

/* Apply theme colors to other elements */
.logo {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 600;
}

.header {
    background-color: var(--theme-bg);
    border-bottom: 1px solid var(--theme-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Very subtle shadow */
}

.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-bg); /* Use theme-bg for text for good contrast */
    padding: var(--space-sm) var(--space);
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}

    .btn-primary:hover {
        background-color: color-mix(in srgb, var(--theme-primary) 85%, var(--dark) 15%);
        border-color: color-mix(in srgb, var(--theme-primary) 85%, var(--dark) 15%);
        color: var(--theme-bg);
        opacity: 1;
    }

/* Responsive Adjustments */
@media screen and (max-width: 640px) {
    .header-controls .mood-trigger {
        padding: 0.5rem;
    }

    .header-controls .mood-label {
        display: none;
    }

    .mood-dialog {
        padding: var(--space);
        width: 95%;
    }

    .mood-options {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .mood-controls {
        flex-direction: column;
    }

    .mood-continue,
    .mood-skip {
        width: 100%;
    }
}