/* Root variables for custom colour palette */
:root {
  /* Custom colour palette */
  --background-color: hsl(240, 8%, 9%); /* Main background */
  --contrast-multiplier: 1.2;
  --primary-color: hsl(43, 50%, 70%); /* Primary colour */
  --secondary-text: rgb(139, 139, 156); /* Secondary text */
  --positive-color: hsl(96, 44%, 68%); /* Success/Positive */
  --negative-color: hsl(359, 68%, 71%); /* Error/Negative */
}
/* Override Amber theme with custom colours */
/* Use !important to override other styles */
.theme-slate {
  --color-50: 248, 250, 252 !important;  /* Lightest */
  --color-100: 241, 245, 249 !important;
  --color-200: 226, 232, 240 !important;
  --color-300: 203, 213, 225 !important;
  --color-400: 148, 163, 184 !important;
  --color-500: 100, 116, 139 !important; /* Base colour */
  --color-600: 71, 85, 105 !important;
  --color-700: 51, 65, 85 !important;
  --color-800: 21, 21, 25 !important;
  --color-900: 23, 23, 28 !important;
  /* Logo colours */
  --color-logo-start: 148, 163, 184 !important;
  --color-logo-stop: 51, 65, 85 !important;
}
/* Apply custom font-family globally */
html, body {
  font-family: 'JetBrains Mono', monospace !important;  /* Force your preferred font */
  text-rendering: optimizeLegibility !important;  /* Improve text rendering */
  margin: 0;
  padding: 0;
  background-color: var(--background-color); /* Use custom background */
  color: var(--secondary-text); /* Use custom primary colour for text */
  font-size: 16px;
  line-height: 1.6;
}
/* Body text styling */
body {
  background-color: var(--background-color);
  color: var(--secondary-text);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}
/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
}
a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
/* Buttons */
button {
  background-color: var(--color-800);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: var(--color-900); /* Darken the primary colour for hover effect */
}
/* Success message */
.success {
  background-color: var(--positive-color);
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.success:hover {
  background-color: hsl(96, 44%, 58%); /* Darken the positive colour for hover effect */
}
/* Error message */
.error {
  background-color: var(--negative-color);
  color: white !important;
  padding: 10px;
  border-radius: 5px;
}
.error:hover {
  background-color: hsl(359, 68%, 60%); /* Darken the negative colour for hover effect */
  color: white !important;
}
/* Styling form elements */
input, select, textarea {
  border: 1px solid var(--color-500);
  background-color: var(--color-100);
  color: var(--color-700);
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}
/* Logo style */
.logo {
  background: linear-gradient(45deg, hsl(148, 163, 184), hsl(51, 65, 85));
  color: var(--color-logo-start);
}
/* Set background for sections */
section {
  background-color: var(--color-200);
  padding: 20px;
  border-radius: 10px;
}
/* Add contrast effect */
section:hover {
  background-color: var(--color-300);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
/* Add hover effect for table rows */
table tr:hover {
  background-color: var(--color-400);
}
/* Footer */
footer {
  background-color: var(--color-800);
  color: white;
  padding: 20px;
  text-align: center;
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}