@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Root variables for custom colour palette */

:root {
  /* Custom colour palette */

  --background-color: hsl(229, 19%, 23%); /* Main background */

  --contrast-multiplier: 1.2;

  --primary-color: hsl(222, 74%, 74%); /* Primary colour */

  --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-amber {
  --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: 30, 41, 59 !important;

  --color-900: 15, 23, 42 !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(--primary-color); /* Use custom primary colour for text */

  font-size: 16px;

  line-height: 1.6;
}

/* Links */

a {
  color: var(--primary-color);

  text-decoration: none;
}

a:hover {
  color: var(--primary-color);

  text-decoration: underline;
}

/* Buttons */

button {
  background-color: var(--primary-color);

  color: white;

  border: none;

  padding: 10px 20px;

  cursor: pointer;

  border-radius: 5px;

  transition: background-color 0.3s ease;
}

button:hover {
  background-color: hsl(
    222,
    74%,
    60%
  ); /* 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;

  padding: 10px;

  border-radius: 5px;
}

.error:hover {
  background-color: hsl(
    359,
    68%,
    60%
  ); /* Darken the negative colour for hover effect */
}

/* 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);
}

/* 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);

  padding: 20px;

  text-align: center;
}

/* Media Queries for responsiveness */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  button {
    width: 100%;
  }
  input,
  select,
  textarea {
    width: 100%;
  }
}

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

.dark\:text-theme-300:is(.dark *) {
  color: #a3a8c0 !important;
}

button,
input,
optgroup,
select,
textarea {
  font-size: 14px !important;
}