/* ===================================================== */
/* HORIZON AI OS — V2 CONSTITUTIONAL GOVERNANCE CSS      */
/* ===================================================== */

/* ===== ROOT TOKENS ===== */

:root{

--bg-primary:#030712;
--bg-secondary:#0b1220;
--bg-card:#111827;

--border-primary:#1f2937;
--border-accent:#38bdf8;

--text-primary:#e5e7eb;
--text-secondary:#94a3b8;
--text-muted:#6b7280;

--accent-blue:#38bdf8;
--accent-yellow:#facc15;
--accent-green:#22c55e;
--accent-red:#ef4444;

--radius-sm:10px;
--radius-md:16px;
--radius-lg:20px;

--transition-fast:0.2s;

}

/* ===== GLOBAL RESET ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ===== BODY ===== */

body{
background:var(--bg-primary);
color:var(--text-primary);
font-family:Arial,sans-serif;
}

/* ===== TOPBAR ===== */

.spacial-topbar{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:14px;
background:var(--bg-secondary);
border-bottom:1px solid var(--border-primary);
}

.spacial-top-btn{
padding:10px 14px;
border-radius:var(--radius-sm);
border:1px solid var(--border-primary);
background:var(--bg-card);
color:var(--text-primary);
cursor:pointer;
transition:var(--transition-fast);
}

.spacial-top-btn:hover{
border-color:var(--border-accent);
background:#172033;
}

/* ===== CARDS ===== */

.dashboard-card{
background:var(--bg-secondary);
border:1px solid var(--border-primary);
border-radius:var(--radius-md);
padding:20px;
}

/* ===== BUTTONS ===== */

.spacial-btn{
padding:10px 14px;
border-radius:var(--radius-sm);
border:1px solid var(--border-accent);
background:#172554;
color:white;
cursor:pointer;
transition:var(--transition-fast);
}

.spacial-btn:hover{
background:#1d4ed8;
}

/* ===== PANELS ===== */

.panel{
background:var(--bg-secondary);
border:1px solid var(--border-primary);
border-radius:var(--radius-md);
padding:20px;
}

/* ===== STATUS ===== */

.status-green{
color:var(--accent-green);
}

.status-yellow{
color:var(--accent-yellow);
}

.status-red{
color:var(--accent-red);
}

.status-blue{
color:var(--accent-blue);
}


/* ===================================== */
/* DASHBOARD LAYOUT */
/* ===================================== */

.dashboard-shell{
    max-width:1500px;
    margin:auto;
    padding:24px;
}

.dashboard-panel{
    background:#071226;
    border-radius:28px;
    padding:36px;
}


.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;
}


.hero-panel{
    background:linear-gradient(135deg,#1d4ed8,#2563eb);
    color:#fff;
    border-radius:16px;
    padding:28px;
    margin-bottom:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.hero-title{
    margin:0;
    font-size:32px;
    font-weight:700;
    line-height:1.2;
}

.hero-subtitle{
    margin-top:12px;
    font-size:16px;
    line-height:1.6;
    opacity:.92;
}