/*
 * BrownMailer shared brand theme
 * Matches the public homepage: navy, blue and cool white.
 * Preserves the application's existing light/dark theme controls.
 */

:root {
    --bm-roast: #0D3B66;
    --bm-leather: #172B3D;
    --bm-cognac: #1769AA;
    --bm-cognac-hover: #12558C;
    --bm-gold: #62A9E8;
    --bm-cream: #F5F9FD;
    --bm-sand: #E8F3FC;
    --bm-border: #D9E6F1;
    --bm-muted: #667C8F;

    --color-text: #0D3B66;
    --color-text-secondary: #405568;
    --color-text-muted: #667C8F;
    --color-page-bg: #F5F9FD;
    --color-card-bg: #FFFFFF;
    --color-hover-bg: #EEF5FC;
    --color-active-bg: #E1EFFB;
    --color-subtle-bg: #F5F9FD;
    --color-bg-subtle: #F5F9FD;
    --color-banner-bg: #E8F3FC;
    --color-border: #D9E6F1;
    --color-border-strong: #B9D0E3;
    --color-border-focus: #1769AA;
    --color-teal: #1769AA;
    --color-teal-hover: #12558C;
    --color-teal-active: #0D3B66;
    --color-teal-ring: rgba(23, 105, 170, 0.18);
    --color-teal-light: #E8F3FC;

    --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:not([data-theme="dark"]) body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:not([data-theme="dark"]) .mc-app {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.auth-card-title,
.mc-app .page-title,
.mc-app .section-title {
    font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
}

a {
    text-decoration-color: rgba(23, 105, 170, 0.45);
}

:where(a, button, input, select, textarea):focus-visible {
    outline-color: #1769AA;
}

::selection {
    color: #FFFFFF;
    background: #1769AA;
}

/* Keep primary controls aligned with the homepage brand. */
.btn-primary,
button.btn-primary,
.auth-submit-btn,
.auth-btn-primary {
    background-color: #1769AA;
    border-color: #1769AA;
}

.btn-primary:hover,
button.btn-primary:hover,
.auth-submit-btn:hover,
.auth-btn-primary:hover {
    background-color: #12558C;
    border-color: #12558C;
}

/* Preserve dark surfaces and readable text in dark mode. */
[data-theme="dark"] {
    --color-text: #EAF3FC;
    --color-text-secondary: #C8D9E8;
    --color-text-muted: #A6BDD1;
    --color-page-bg: #101D2A;
    --color-card-bg: #172B3D;
    --color-hover-bg: #203C52;
    --color-active-bg: #254B68;
    --color-subtle-bg: #142535;
    --color-bg-subtle: #142535;
    --color-banner-bg: #172B3D;
    --color-border: #31536E;
    --color-border-strong: #456D8C;
    --color-border-focus: #62A9E8;
    --color-teal: #62A9E8;
    --color-teal-hover: #F0AD62;
    --color-teal-active: #C98239;
    --color-teal-ring: rgba(98, 169, 232, 0.22);
    --color-teal-light: rgba(98, 169, 232, 0.12);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] .auth-submit-btn,
[data-theme="dark"] .auth-btn-primary {
    background-color: #1769AA;
    border-color: #1769AA;
    color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover,
[data-theme="dark"] .auth-submit-btn:hover,
[data-theme="dark"] .auth-btn-primary:hover {
    background-color: #12558C;
    border-color: #12558C;
}

/* Make common cards and form controls use the shared warm border. */
.mc-app .card,
.mc-app .modal-content,
.mc-app .dropdown-menu,
.auth-card {
    border-color: var(--color-border);
}

.mc-app input:not([type="checkbox"]):not([type="radio"]),
.mc-app select,
.mc-app textarea,
.auth-card input:not([type="checkbox"]):not([type="radio"]),
.auth-card select,
.auth-card textarea {
    accent-color: #1769AA;
}

.mc-app input:focus,
.mc-app select:focus,
.mc-app textarea:focus,
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}