:root{
    --brand-primary:#0b5d96;
    --brand-primary-hover:#084f7f;
    --brand-accent:#169c8b;
    --brand-deep-purple:#113450;
    --text-primary:#132437;
    --text-secondary:#49637b;
    --surface:#f4f9fd;
    --surface-elevated:#ffffff;
    --border:#d6e3ef;
    --success:#0f7f61;
    --warning:#9a6a14;
    --error:#b31f30;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --shadow-card:0 8px 24px rgba(19,16,34,0.08);
    --shadow-soft:0 2px 10px rgba(19,16,34,0.08);
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --container-max:1080px;

    /* Typography scale */
    --font-xs:11px;
    --font-sm:13px;
    --font-base:14px;
    --font-md:16px;
    --font-lg:18px;
    --font-xl:22px;
    --font-2xl:28px;
    --line-tight:1.2;
    --line-normal:1.5;
    --line-relaxed:1.7;
}

body{
    font-family:'Space Grotesk','Segoe UI',sans-serif;
    background:var(--surface);
    color:var(--text-primary);
}

.app-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.9);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
}

.app-header .header-inner,
.app-footer .footer-inner,
.container{
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 var(--space-5);
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:var(--text-primary);
}

.brand-logo{
    height:28px;
    width:auto;
}
.brand-logo.full{height:28px}
.brand-logo.mark{height:24px}
.brand-logo.inverse{filter:brightness(0) invert(1)}

.section{
    padding:var(--space-7) 0;
}

.card{
    background:var(--surface-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
}

.btn-primary{
    background:var(--brand-primary);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    padding:10px 18px;
    font-weight:600;
    transition:background .15s, transform .15s;
}

.btn-primary:hover{
    background:var(--brand-primary-hover);
    transform:translateY(-1px);
}

.btn-secondary{
    background:var(--surface-elevated);
    color:var(--brand-primary);
    border:1px solid rgba(11,93,150,0.35);
    border-radius:var(--radius-sm);
    padding:10px 18px;
    font-weight:600;
}

.badge{
    border-radius:999px;
    padding:4px 10px;
    font-size:11px;
    font-weight:600;
}

.focus-ring:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
    outline:2px solid rgba(11,93,150,0.4);
    outline-offset:2px;
}

.app-footer{
    margin-top:var(--space-7);
    border-top:1px solid var(--border);
    background:var(--surface-elevated);
}

.app-footer .footer-inner{
    padding:var(--space-5) var(--space-5);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
}

.status-hero{
    background:linear-gradient(135deg, rgba(11,93,150,0.12), rgba(22,156,139,0.1));
    border-bottom:1px solid var(--border);
}

.grid{
    display:grid;
    gap:var(--space-4);
}

.grid-3{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

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

@media(max-width:700px){
    .app-header .header-inner,
    .app-footer .footer-inner,
    .container{
        padding:0 var(--space-4);
    }
}

/* ── Dark mode ────────────────────────────────────────────────── */
@media(prefers-color-scheme:dark){
    :root{
        --brand-primary:#1c88cf;
        --brand-primary-hover:#3b9fdf;
        --text-primary:#e4edf7;
        --text-secondary:#8fa8bf;
        --surface:#0f1a24;
        --surface-elevated:#172535;
        --border:#2a3e52;
        --success:#2ac090;
        --warning:#dcaa4c;
        --error:#ef5e6e;
        --shadow-card:0 8px 24px rgba(0,0,0,0.4);
        --shadow-soft:0 2px 10px rgba(0,0,0,0.3);
    }
    body{background:var(--surface);color:var(--text-primary)}
    .app-header{background:rgba(28,24,36,0.9)}
    .app-footer{background:var(--surface-elevated)}
}