/* --- CSS Variables --- */
:root {
    /* Audinum Color Palette - Light Theme */
    --audinum-primary-blue: #1D3557;    /* Deep navy - Headers, Brand */
    --audinum-accent-blue: #457B9D;     /* Steel blue - Buttons, Links (Action) */
    --audinum-highlight-cyan: #A8DADC; /* Soft cyan - Secondary highlights (Not heavily used here yet) */
    --audinum-background-light: #F1FAFA; /* Pale cyan-gray - Main background */
    --audinum-dark-gray: #2C2C2C;       /* Dark gray - Text */
    --audinum-success-green: #38B000;   /* Success */
    --audinum-warning-amber: #FFB703;   /* Warning (Not used here yet) */
    --audinum-error-red: #E63946;       /* Error */
    --logo-color: #1D3557;

    /* Derived & Standard Colors - Light Theme */
    --primary-brand-color: var(--audinum-primary-blue);        /* For h1 */
    --primary-action-color: var(--audinum-accent-blue);       /* Buttons, links */
    --primary-action-hover-color: #366783; /* Darker accent blue for hover */
    --text-color: var(--audinum-dark-gray);                   /* Main text */
    --text-muted-color: #6c757d;           /* Muted gray for secondary text */
    --background-color: var(--audinum-background-light);      /* Page background */
    --container-background: #FFFFFF;       /* White container for contrast */
    --border-color: #DDE8E8;               /* Light border derived from background */
    --input-background: #FFFFFF;
    --input-focus-border: var(--primary-action-color);
    --input-focus-shadow: rgba(69, 123, 157, 0.3); /* Accent blue shadow */
    --button-text-color: #FFFFFF;           /* White text on accent blue buttons */
    --success-color: var(--audinum-success-green);
    --error-color: var(--audinum-error-red);
    --link-color: var(--primary-action-color);
    --link-hover-color: var(--primary-action-hover-color);
    --icon-color: var(--text-muted-color);
    --icon-hover-color: var(--text-color);
    --toggle-button-bg: #E0EAEA; /* Slightly darker than background */
    --toggle-button-hover-bg: #C9D9D9;
}

html[data-theme='dark'] {
    /* Audinum Color Palette - Dark Theme Overrides */
    /* Re-map colors for dark mode contrast */

    /* Derived & Standard Colors - Dark Theme */
    --primary-brand-color: #6A9EC1;       /* Lighter steel blue for h1 */
    --primary-action-color: var(--audinum-highlight-cyan); /* Use Highlight Cyan for action */
    --primary-action-hover-color: #BEE0E0; /* Lighter cyan for hover */
    --text-color: var(--audinum-background-light); /* Use light background color for text */
    --text-muted-color: #9CA3AF;           /* Standard light gray for muted text */
    --background-color: #16263B;           /* Darker shade of Primary Blue */
    --container-background: #213752;       /* Slightly lighter than bg */
    --border-color: #365376;               /* Border derived from blues */
    --input-background: var(--container-background);
    --input-focus-border: var(--primary-action-color);
    --input-focus-shadow: rgba(168, 218, 220, 0.4); /* Highlight cyan shadow */
    --button-text-color: var(--audinum-primary-blue); /* Use dark blue text on cyan buttons */
    --success-color: #4CDA00;              /* Brighter Success Green */
    --error-color: #F0505E;              /* Brighter Error Red */
    --link-color: var(--primary-action-color);
    --link-hover-color: var(--primary-action-hover-color);
    --icon-color: var(--text-muted-color);
    --icon-hover-color: var(--text-color);
    --toggle-button-bg: #365376; /* Use border color */
    --toggle-button-hover-bg: #457B9D; /* Use light accent blue */
    --logo-color: #6A9EC1;
}

/* --- LOGO STYLES --- */
.audinum-logo {
    display: block; /* Make it a block element for margin auto */
    width: 200px;    /* Adjust width as desired */
    height: auto;   /* Maintain aspect ratio */
    margin: 0 auto 1rem auto; /* Center horizontally, add 1rem margin below */
}

.audinum-logo polygon {
    fill: var(--logo-color); /* Use the CSS variable for color */
    transition: fill 0.3s ease; /* Smooth color transition */
}

/* --- Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

/* --- Main Container --- */
.container {
    background-color: var(--container-background);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-align: center;
    max-width: 500px;
    width: 100%;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* --- Header --- */
header {
    margin-bottom: 1.5rem;
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 0.5rem;
}

.app-name {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-brand-color); /* Use brand color */
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}

/* --- Content Section --- */
.content {
    margin-bottom: 2rem;
}

.coming-soon-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.description {
    font-size: 1rem;
    color: var(--text-muted-color);
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    transition: color 0.3s ease;
}

.notify-prompt {
    font-size: 0.875rem;
    color: var(--text-muted-color);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

/* --- Notify Form --- */
.notify-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

.notify-form input[type="email"] {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    flex-grow: 1;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.notify-form input[type="email"]:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.notify-form input[type="email"]::placeholder {
    color: var(--text-muted-color);
    opacity: 0.7;
    transition: color 0.3s ease;
}

.notify-form button[type="submit"] {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--button-text-color); /* Critical: Ensure text contrasts with button bg */
    background-color: var(--primary-action-color); /* Use action color */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    white-space: nowrap;
}

.notify-form button[type="submit"]:hover {
    background-color: var(--primary-action-hover-color); /* Use action hover */
}

#submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Form Feedback Styling --- */
.form-feedback {
    margin-top: 1rem;
    font-size: 0.875rem;
    min-height: 1.2em;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-feedback.success {
    color: var(--success-color);
}

.form-feedback.error {
    color: var(--error-color);
}

/* --- Footer --- */
footer {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--text-muted-color);
    transition: color 0.3s ease;
}

footer a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

footer a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* --- Theme Toggle Button --- */
.theme-toggle-button {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem;
    background-color: var(--toggle-button-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle-button:hover {
    background-color: var(--toggle-button-hover-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.theme-toggle-button svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--icon-color);
    transition: color 0.3s ease;
}

.theme-toggle-button:hover svg {
     color: var(--icon-hover-color);
}

/* --- Responsive Adjustments --- */
@media (min-width: 640px) {
    .container {
        padding: 3rem;
    }

    .notify-form {
        flex-direction: row;
    }

    .app-name {
        font-size: 3rem;
    }

    .coming-soon-title {
        font-size: 2.25rem;
    }
}