:root {
    --color-background: #FFFFFF; 
    --color-text-primary: #455A64; 
    --color-text-secondary: #78909C; 
    --color-accent: #81C784; 
    --color-border: #E0F2F1; 
    --color-section-bg: #F9FBEA; 
    --color-section-hover: #F1F8E9; 
    
    
    --color-operational-bg: #E8F5E9; 
    --color-operational-text: #388E3C; 
    --color-operational-dot: #81C784; 

    --color-degraded-bg: #FFFDE7; 
    --color-degraded-text: #FFB300; 
    --color-degraded-dot: #FFD54F; 

    --color-outage-bg: #FBEFF0; 
    --color-outage-text: #D32F2F; 
    --color-outage-dot: #EF9A9A; 
}


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

header {
    
    background: var(--color-background); 
    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);
}

.service {
    
    border: 1px solid var(--color-border);
    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);
}