:root {
    /* Base sizes */
    --font-size-base: 14px;
    /* Light theme (defaults) */
    --bg: #D5E7D0;
    --text: #222;
    --navbar-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #ddd;
    --hero-border: #ddd;
    --control-bg: #fff;
    --control-border: #ccc;
    /* Accent */
    --primary: #284D38;
    --primary-hover: #9b6fe0;
    --link: #c792ea;
    --link-hover: #e0b3ff;
    /* Focus */
    --focus-shadow-outer: rgba(255,255,255,1);
    --focus-shadow-inner: rgba(37,140,251,1);
}

/* Dark theme overrides */
body.dark-theme{
    --bg: #0f1115;
    --text: #f5f5f5;
    --navbar-bg: #181b22;
    --card-bg: #181b22;
    --card-border: #2a2f3a;
    --hero-border: #2a2f3a;
    --control-bg: #0f1115;
    --control-border: #2a2f3a;
}

/* Typography + layout */
html{
    font-size: var(--font-size-base);
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px){
    html{ font-size: 16px; }
}

body{
    background-color: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Navbar */
.navbar{
    background-color: var(--navbar-bg);
    /* If Bootstrap overrides this, prefer increasing specificity instead of using !important */
}

/* Buttons */
.btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover{
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Cards / identity card / hero use same base tokens */
.card,
.identity-card{
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text);
}

.hero-section{
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--hero-border);
}

/* Links */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

/* Focus visuals */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus{
    box-shadow: 0 0 0 0.1rem var(--focus-shadow-outer), 0 0 0 0.25rem var(--focus-shadow-inner);
}

/* Identity form controls */
.identity-card input.form-control,
.identity-card select.form-select{
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text);
}

/* Badge overrides */
.badge.bg-secondary {
    background-color: #284D38 !important;
}