:root {
    --color-background: #121212; 
    --color-text-primary: #F0F0F0; 
    --color-text-secondary: #BDBDBD; 
    --color-accent: #FF6D00; 
    --color-border: #424242; 
    --color-section-bg: #1F1F1F; 
    --color-section-hover: #2A2A2A; 
    
    
    --color-operational-bg: #388E3C; 
    --color-operational-text: #F0F0F0;
    --color-operational-dot: #4CAF50;

    --color-degraded-bg: #FFB300; 
    --color-degraded-text: #121212; 
    --color-degraded-dot: #FF6D00; 

    --color-outage-bg: #D32F2F; 
    --color-outage-text: #F0F0F0;
    --color-outage-dot: #FF0000; 
}


body {
    background: var(--color-background); 
    color: var(--color-text-primary);
    
}

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

.company-name,
.hero h1,
.meta-value,
.stat-value,
.service-info h3,
.section-title,
.uptime-percentage {
    color: var(--color-text-primary); 
}

.status-type,
.header-right,
.hero p,
.stat-label,
.meta-label,
.footer-left {
    color: var(--color-text-secondary); 
}


.logo {
    
    background: var(--color-accent); 
    color: var(--color-background); 
}

.hero-meta {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}



.section-title {
    border-bottom: 1px solid var(--color-border);
    
    box-shadow: 0 1px 0 0 var(--color-accent); 
    border-bottom: none; 
    padding-bottom: 15px; 
}

.service {
    
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-accent); 
    background: var(--color-section-bg);
}

.service:hover {
    background: var(--color-section-hover); 
    transition: background 0.2s ease;
}

.stat-row {
    border-bottom: 1px solid var(--color-border);
}


.status-badge {
    text-transform: uppercase;
}

.badge-operational {
    background: var(--color-operational-bg);
    color: var(--color-operational-text);
}

.dot-up {
    background: var(--color-operational-dot);
}

.badge-degraded {
    background: var(--color-degraded-bg);
    color: var(--color-degraded-text);
}

.dot-degraded {
    background: var(--color-degraded-dot);
}

.badge-outage {
    background: var(--color-outage-bg);
    color: var(--color-outage-text);
}

.dot-down {
    background: var(--color-outage-dot);
}


footer {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}