:root {
    --color-background: #FAF7F5; 
    --color-text-primary: #374151; 
    --color-text-secondary: #6B7280; 
    --color-accent: #0E9F6E; 
    --color-border: #E5DDD7; 
    --color-section-bg: #FFFFFF; 
    --color-section-hover: #F0EDE8; 
    
    
    --color-operational-bg: #ECFDF5;
    --color-operational-text: #065F46;
    --color-operational-dot: #10B981;

    --color-degraded-bg: #FFFBEB;
    --color-degraded-text: #92400e;
    --color-degraded-dot: #FBBF24; 

    --color-outage-bg: #FEF2F2;
    --color-outage-text: #991B1B;
    --color-outage-dot: #F87171; 
}


body {
    background: var(--color-background); 
    color: var(--color-text-primary);
    font-family: 'FlowBlock', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
}

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

.meta-label {
    
    color: #9CA3AF; 
}



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


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