/*
 * Spellmonger website styling (login / index / static pages).
 *
 * Loaded by templates/website/base.html via
 * /static/website/css/custom.css. Same palette as the webclient theme
 * so the visual identity is consistent from landing page to in-game.
 *
 * Palette: parchment-on-cream. Dark warm-ink text on a light parchment
 * surface. Reads like a medieval ledger rather than a dark-mode terminal.
 */


:root {
    --sm-bg-deep:     #f4ead5;   /* parchment beige -- main page bg */
    --sm-bg-panel:    #ebdfc1;   /* slightly aged parchment for cards */
    --sm-text:        #2b2520;   /* dark warm-brown ink */
    --sm-text-dim:    #6a5d4f;   /* faded ink for secondary text */
    --sm-accent:      #7a3818;   /* heraldic russet / burnt sienna */
    --sm-accent-cool: #2c5f7a;   /* medieval teal / azure */
    --sm-border:      #b8a17a;   /* tan binding */
}


html, body {
    background-color: var(--sm-bg-deep);
    color: var(--sm-text);
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--sm-accent);
}
a:hover {
    color: var(--sm-accent-cool);
    text-decoration: underline;
}


.navbar, .navbar-dark {
    background-color: var(--sm-bg-panel) !important;
    border-bottom: 1px solid var(--sm-border);
    color: var(--sm-text) !important;
}
.navbar a, .navbar .nav-link, .navbar-text {
    color: var(--sm-text) !important;
}

.navbar-brand {
    color: var(--sm-accent) !important;
    font-weight: bold;
    letter-spacing: 0.05em;
}


.container, .container-fluid {
    color: var(--sm-text);
}

h1, h2, h3, h4 {
    color: var(--sm-accent);
    font-family: "Georgia", serif;
}


.card, .panel, .well {
    background-color: var(--sm-bg-panel) !important;
    border: 1px solid var(--sm-border) !important;
    color: var(--sm-text) !important;
}


/* Bootstrap form controls — login / register / password reset all use these. */
input[type=text], input[type=email], input[type=password], textarea, select,
.form-control {
    background-color: #fdf6e3 !important;
    color: var(--sm-text) !important;
    border: 1px solid var(--sm-border) !important;
}
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, textarea:focus, select:focus,
.form-control:focus {
    background-color: #fffcec !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-accent) !important;
    box-shadow: 0 0 0 0.1rem rgba(122,56,24,0.25) !important;
}


.btn-primary {
    background-color: var(--sm-accent) !important;
    border-color: var(--sm-accent) !important;
    color: #fdf6e3 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--sm-text) !important;
    border-color: var(--sm-text) !important;
    color: #fdf6e3 !important;
}


@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }
    .container, .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}