/* =============================================================
   ONE SET — Theme
   Retro / analog aesthetic. Warm parchment, burnt orange, olive.
   Bootstrap 5 overrides + custom design tokens.
   ============================================================= */


/* ----- DESIGN TOKENS: LIGHT MODE (default) ----- */

:root,
[data-theme="light"] {
    --bg-primary: #F5F0E8;
    --bg-secondary: #EDE6D8;
    --bg-tertiary: #E8D5B8;
    --text-primary: #3A3228;
    --text-secondary: #8A7E6E;
    --accent-primary: #C4652A;
    --accent-primary-hover: #A8541F;
    --accent-positive: #5B7A4A;
    --accent-negative: #B84C3A;

    --navbar-bg: var(--bg-secondary);
    --card-bg: var(--bg-secondary);
    --card-border: rgba(58, 50, 40, 0.10);
    --input-bg: #FFFDF8;
    --input-border: #D6CEBC;
    --input-focus-shadow: rgba(196, 101, 42, 0.2);
    --divider: rgba(58, 50, 40, 0.08);

    color-scheme: light;
}


/* ----- DESIGN TOKENS: DARK MODE ----- */

[data-theme="dark"] {
    --bg-primary: #2A2520;
    --bg-secondary: #352F28;
    --bg-tertiary: #3E362B;
    --text-primary: #E8DFD0;
    --text-secondary: #A89B88;
    --accent-primary: #D4976A;
    --accent-primary-hover: #C4864E;
    --accent-positive: #7EA66A;
    --accent-negative: #CF6B5A;

    --navbar-bg: var(--bg-secondary);
    --card-bg: var(--bg-secondary);
    --card-border: rgba(232, 223, 208, 0.08);
    --input-bg: #322C26;
    --input-border: #4A4238;
    --input-focus-shadow: rgba(212, 151, 106, 0.2);
    --divider: rgba(232, 223, 208, 0.06);

    color-scheme: dark;
}

/* Auto-detect for first visit (no stored preference yet) */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg-primary: #2A2520;
        --bg-secondary: #352F28;
        --bg-tertiary: #3E362B;
        --text-primary: #E8DFD0;
        --text-secondary: #A89B88;
        --accent-primary: #D4976A;
        --accent-primary-hover: #C4864E;
        --accent-positive: #7EA66A;
        --accent-negative: #CF6B5A;

        --navbar-bg: var(--bg-secondary);
        --card-bg: var(--bg-secondary);
        --card-border: rgba(232, 223, 208, 0.08);
        --input-bg: #322C26;
        --input-border: #4A4238;
        --input-focus-shadow: rgba(212, 151, 106, 0.2);
        --divider: rgba(232, 223, 208, 0.06);

        color-scheme: dark;
    }
}


/* ----- GLOBAL ----- */

body {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content fills available space, pushes footer down */
main {
    flex: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Bitter', serif;
    font-weight: 600;
    color: var(--text-primary);
}

a {
    color: var(--accent-primary);
}
a:hover {
    color: var(--accent-primary-hover);
}

::selection {
    background-color: var(--accent-primary);
    color: #fff;
}

hr {
    border-color: var(--divider);
    opacity: 1;
}


/* ----- NAVBAR ----- */

.navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--card-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-family: 'Bitter', serif;
    font-weight: 700;
    color: var(--accent-primary) !important;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

.brand-icon {
    display: inline-block;
    font-size: 0.6em;
    vertical-align: middle;
    margin-right: 0.15em;
    opacity: 0.7;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 400;
    font-size: 0.95rem;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    transition: color 0.15s ease;
}
.nav-link:hover,
.nav-link.active {
    color: var(--text-primary) !important;
}

.navbar-toggler {
    border-color: var(--card-border);
}
.navbar-toggler-icon {
    filter: invert(0.4) sepia(0.3) saturate(0.5);
}
[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(0.8) sepia(0.2) saturate(0.3);
}


/* ----- CARDS ----- */

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--divider);
    font-family: 'Bitter', serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.85rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}


/* ----- FORMS ----- */

.form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}


/* ----- BUTTONS ----- */

.btn {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: #fff;
}

.btn-success {
    background-color: var(--accent-positive);
    border-color: var(--accent-positive);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--card-border);
}
.btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}


/* ----- THEME TOGGLE ----- */

.theme-toggle-btn {
    line-height: 1;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
}

[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light {
    display: none;
}
[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark {
    display: inline;
}


/* ----- BADGES ----- */

.badge-progress {
    background-color: var(--accent-positive);
    color: #fff;
}
.badge-stall {
    background-color: var(--accent-negative);
    color: #fff;
}
.badge-neutral {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}


/* ----- ALERTS ----- */

.alert {
    border-radius: 6px;
}


/* ----- UTILITIES ----- */

.text-muted {
    color: var(--text-secondary) !important;
}

.text-accent {
    color: var(--accent-primary);
}

.border-accent {
    border-color: var(--accent-primary) !important;
}

.bg-surface {
    background-color: var(--bg-secondary);
}


/* ----- SUPERSET GROUPING ----- */

.superset-group {
    border-left: 3px solid var(--accent-primary);
    padding-left: 1rem;
    margin-bottom: 1rem;
}


/* ----- FOOTER ----- */

.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--divider);
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.site-footer .container span:first-child {
    font-family: 'Bitter', serif;
    font-weight: 600;
    color: var(--text-secondary);
}