:root {
  /* Main Background & Text Colors */
  --body-background-color: #f0f7f7; /* Keep a light base for readability */
  --body-text-color: #002626; /* Keep a dark text for contrast */

  /* Card Colors - Using white for cards to make content pop */
  --card-background-color: #ffffff;
  --card-border-color: #d8e8e4;

  /* Navigation Colors */
  --nav-background-color: #ffffff;
  --nav-border-bottom-color: #d8e8e4;
  --nav-current-border-bottom-color: #71b6e4; /* Start of your gradient for active nav */

  /* Status Colors - Adapting to the gradient's hues */
  --down-border-left-color: #eb3b5a; /* Red from your gradient's end (similar) */
  --down-background-color: #ffd0d2; /* Light red */

  --degraded-border-left-color: #f7b731; /* Yellow from your gradient (similar) */
  --up-border-left-color: #20bf6b; /* Green for 'up' status (complementary) */

  /* Tag Colors - Using white text on gradient-based backgrounds */
  --tag-color: #ffffff;
  --tag-up-background-color: #20bf6b; /* Green for up */
  --tag-down-background-color: #eb3b5a; /* Red for down */
  --tag-degraded-background-color: #f7b731; /* Yellow for degraded */

  /* Change Background Color - Using a color from your gradient */
  --change-background-color: #9497cd; /* A mid-tone from your gradient */

  /* Button Colors - Using primary blue from your gradient as base */
  --error-button-border-color: #da8496; /* A reddish tone from your gradient */
  --error-button-background-color: #ec8179; /* End of your gradient */
  --error-button-color: #ffffff;

  --submit-button-border-color: #71b6e4; /* Start of your gradient */
  --submit-button-background-color: #9497cd; /* Another color from your gradient */
  --submit-button-color: #ffffff;

  /* Graph Opacity & Filter (unchanged unless you want the gradient directly in graphs) */
  --graph-opacity: 1;
  --graph-filter: none;
}

/* Apply the gradient to elements that Upptime might use for primary actions or highlights */
/* This might require inspecting Upptime's HTML to target specific elements correctly */
/* For example, if you want the main heading or overall page background to have the gradient: */

body {
  background-image: linear-gradient(135deg, #71b6e4, #9497cd, #bc8ac8, #da8496, #ec8179);
  background-size: 300% 300%;
  animation: gradient 15s ease infinite;
}

/* If there's a specific class for the main content area, you might apply the gradient to that instead */
/* For example: */
/* .upptime-main-content {
  background-image: linear-gradient(135deg, #71b6e4, #9497cd, #bc8ac8, #da8496, #ec8179);
  background-size: 300% 300%;
  animation: gradient 15s ease infinite;
} */


/* Your existing gradient animation for the body or main content */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}