:root {
    --color-background: #080A0F; 
    --color-text-primary: #00D0FF; 
    --color-text-secondary: #0088AA; 
    --color-accent: #00FF41; 
    --color-border: #004D7A; 
    --color-section-bg: #1A1A1A; 
    --color-section-hover: #2A2A2A; 
    
    
    --color-operational-bg: #032014; 
    --color-operational-text: #00FF41; 
    --color-operational-dot: #00FF41;

    --color-degraded-bg: #3E3E00; 
    --color-degraded-text: #FFFF00; 
    --color-degraded-dot: #FFFF00;

    --color-outage-bg: #330016; 
    --color-outage-text: #FF006E; 
    --color-outage-dot: #FF006E;
}


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); 
    
    text-shadow: 0 0 4px rgba(0, 208, 255, 0.4); 
}

.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); 
    
    box-shadow: 0 0 8px var(--color-accent);
}

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

.hero h1 {
    
    text-shadow: 0 0 10px var(--color-text-primary), 0 0 20px rgba(0, 208, 255, 0.3);
}


.section-title {
    border-bottom: 1px solid var(--color-border);
}

.services-grid {
    
    border: 1px solid var(--color-border);
    padding: 30px; 
    border-radius: 0; 
}

.service {
    
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-section-bg);
}

.service:hover {
    background: var(--color-section-hover); 
    
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.5); 
    transition: all 0.2s ease;
}

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


.status-badge {
    font-weight: 700;
}

.badge-operational {
    background: var(--color-operational-bg);
    color: var(--color-operational-text);
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.5); 
}

.dot-up {
    background: var(--color-operational-dot);
    box-shadow: 0 0 4px var(--color-operational-dot);
}

.badge-degraded {
    background: var(--color-degraded-bg);
    color: var(--color-degraded-text);
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.5); 
}

.dot-degraded {
    background: var(--color-degraded-dot);
    box-shadow: 0 0 4px var(--color-degraded-dot);
}

.badge-outage {
    background: var(--color-outage-bg);
    color: var(--color-outage-text);
    box-shadow: 0 0 5px rgba(255, 0, 110, 0.8); 
}

.dot-down {
    background: var(--color-outage-dot);
    box-shadow: 0 0 4px var(--color-outage-dot);
}


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