:root {
    --color-background: #1A0A1F; 
    --color-text-primary: #F3E5F5; 
    --color-text-secondary: #BCAAA4; 
    --color-accent: #E91E63; 
    --color-border: #4D2C5E; 
    --color-section-bg: #2C1337; 
    --color-section-hover: #3E1A4B; 
    
    
    --color-operational-bg: #4A148C; 
    --color-operational-text: #F3E5F5;
    --color-operational-dot: #9C27B0; 

    --color-degraded-bg: #FFC107; 
    --color-degraded-text: #1A0A1F; 
    --color-degraded-dot: #FFD54F; 

    --color-outage-bg: #790000; 
    --color-outage-text: #F3E5F5;
    --color-outage-dot: #D32F2F; 
}


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-section-bg);
}

.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: none; 
    letter-spacing: normal;
}

.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);
}