:root {
    --color-background: #FFFFFF; 
    --color-text-primary: #5D4037; 
    --color-text-secondary: #9E9E9E; 
    --color-accent: #FF6F91; 
    --color-border: #FFCCBC; 
    --color-section-bg: #FFF9C4; 
    --color-section-hover: #FFEEAA; 
    
    
    --color-operational-bg: #E3F2FD; 
    --color-operational-text: #1976D2; 
    --color-operational-dot: #84A9FF; 

    --color-degraded-bg: #FFF3E0; 
    --color-degraded-text: #F57C00; 
    --color-degraded-dot: #FFC107; 

    --color-outage-bg: #FCE4EC; 
    --color-outage-text: #C2185B; 
    --color-outage-dot: #FF6F91; 
}


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); 
    
    border-radius: 50%; 
    width: 30px; 
    height: 30px;
}

.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);
    border-radius: 12px; 
    background: var(--color-section-bg);
    
    box-shadow: 0 4px 6px -1px rgba(255, 111, 145, 0.1), 0 2px 4px -2px rgba(255, 111, 145, 0.1);
}

.service:hover {
    background: var(--color-section-hover); 
    transition: all 0.2s ease;
    
    transform: translateY(-2px);
    box-shadow: 0 6px 10px -1px rgba(255, 111, 145, 0.15), 0 4px 6px -2px rgba(255, 111, 145, 0.15);
}

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


.status-badge {
    text-transform: capitalize; 
    font-weight: 700;
}

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