/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* 1. Page Background & Global Font */
body, .layout-content, .page-details, .container {
  background-color: #F9F9F9 !important;
  font-family: 'Inter', sans-serif !important;
}

/* 2. Main Status Headline (All Systems Operational) */
/* Set to your preferred 24px small style */
.page-status .status {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: #1C1C1E !important; 
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* 3. Component Names (Grey 600) */
.component-container .name, 
.components-section .component-inner-container .name {
  color: #6F757B !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

/* 4. Primary Button (Subscribe to Updates) */
/* Moving from the light blue in your screenshot to Grey 850 */
.btn, .subscribe-button, .updates-dropdown-container .btn {
  background-color: #1C1C1E !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
}

/* 5. Links (Grey 850 & Medium) */
a, .view-history-link a {
  color: #1C1C1E !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

/* 6. Refine Component Rows */
/* Adds a clean white background to the rows to pop against the grey page */
.component-inner-container {
  background-color: #FFFFFF !important;
  border: 1px solid #F2F2F7 !important; /* Grey 200 */
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  padding: 15px !important;
}

/* 7. Subdued Text (Uptime percentage, etc.) */
.uptime-90-days-label, .legend-item {
  color: #6F757B !important;
  font-size: 12px !important;
}