:root {
    /* --- COLOR PALETTE IDENTITY VARIABLES --- */
    --color-primary-navy: #1F497D;
    --color-secondary-slate: #64748b;
    --color-dark-charcoal: #0f172a;
    --color-muted-gray: #475569;
    --color-light-border: #e2e8f0;
    --color-body-bg: #f0f4f8;
    --color-card-bg: #ffffff;
    
    /* --- LIVE MATRIX STATUS INDICATORS --- */
    --color-status-success: #10b981;     /* Active Emerald Green */
    --color-status-warning: #f97316;     /* Offline Warning Amber Orange */
    --color-status-danger: #ef4444;      /* Outflow Red */
    
    /* --- DASHBOARD VARIANT PANELS COLORS --- */
    --color-hud-green-bg: #e2efda;
    --color-hud-green-border: #c6e0b4;
    --color-hud-blue-bg: #dce6f1;
    --color-hud-blue-border: #b4c6e7;
    --color-hud-slate-bg: #f1f5f9;
    --color-hud-slate-border: #cbd5e1;
    
    /* --- TYPOGRAPHY CONSTANTS --- */
    --font-stack-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-stack-mono: 'Courier New', Courier, monospace;
}

body {
    font-family: var(--font-stack-sans);
    background-color: var(--color-body-bg);
    margin: 0;
    padding: 20px;
    
    /* CONTROL MODULE: Arranges items vertically so the header stacks squarely on top */
    display: flex;
    flex-direction: column; 
    align-items: center; /* Centers both the header block and the workspace dashboard in the window */
    justify-content: flex-start;
    box-sizing: border-box;
}