* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Color Palette */
  --color-blue: hsl(199, 37%, 35%);
  --color-blue-light: hsl(199, 37%, 55%);
  --color-blue-lighter: hsl(199, 37%, 75%);
  --color-blue-lightest: hsl(199, 37%, 85%);

  --color-secondary-blue: hsl(199, 80%, 30%);
  --color-secondary-blue-light: hsl(199, 80%, 55%);
  --color-secondary-blue-lighter: hsl(199, 80%, 75%);

  --color-green-accent: hsl(67, 76%, 52%);
  --color-orange: hsl(29, 91%, 54%);

  /* Warning colors */
  --color-warning-background: hsl(45, 100%, 90%);
  --color-warning-border: hsl(45, 100%, 75%);
  --color-warning-text: hsl(30, 60%, 30%);

  --color-gray-darkest: hsl(0, 0%, 30%);
  --color-gray-dark: hsl(0, 0%, 32%);
  --color-gray-medium: hsl(0, 0%, 50%);
  --color-gray-light: hsl(0, 0%, 80%);
  --color-gray-lightest: hsl(0, 0%, 90%);
  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);

  /* Additional grays for consistency */
  --color-gray-border: hsl(0, 0%, 80%);
  --color-gray-background: hsl(0, 0%, 96%);
  --color-gray-muted: hsl(0, 0%, 40%);
  --color-gray-disabled: hsl(0, 0%, 60%);

  /* Common UI colors */
  --color-text-muted: hsl(0, 0%, 40%);
  --color-border-subtle: hsl(0, 0%, 87%);
  --color-red: hsl(0, 100%, 50%);
  --color-green: hsl(120, 100%, 25%);

  /* Container Backgrounds */
  --container-background: hsl(199, 37%, 95%);

  /* Table Styles */
  --even-row-color: hsl(210, 8%, 100%);
  --odd-row-color: transparent;
  --table-footer-background: hsl(0, 0%, 100%);
  --table-header-background: hsl(0, 0%, 100%);
  --table-header-font-color: var(--color-blue);
  --table-input-padding: 4px;
  --table-row-hover-color: hsl(60, 100%, 95%);
  --table-font-size: 0.9rem;
  --table-footer-font-size: 0.8rem;

  /* App Styles */
  --app-bar-background: var(--color-blue);
  --app-bar-color: hsl(0, 0%, 100%);
  --body-background-color: hsl(0, 0%, 97%);
  --border-color: var(--color-gray-light);
  --border-radius: 5px;

  --font-color: hsl(210, 8%, 10%);
  --font-family-bold: "Roboto", Helvetica, sans-serif;
  --font-family-light: "Roboto", Helvetica, sans-serif;
  --font-family-regular: "Roboto", Helvetica, sans-serif;
  --h1-font-size: 1.8rem;
  --h2-font-size: 1.4rem;
  --h3-font-size: 1.2rem;
  --h4-font-size: 1rem;
  --heading-color: hsl(0, 0%, 20%);

  /* Button Styles */
  /* Default buttons have a dark color with a light background and are found in forms, i.el, Save, Cancel, or Delete */
  --button-cursor: pointer;
  --button-font-family: var(--font-family-regular);
  --button-height: 2rem;
  --button-padding: 7px;
  --button-min-width: 3.5rem;

  --button-background: var(--color-blue);
  --button-color: hsl(0, 0%, 100%);

  --text-button-background: transparent;
  --text-button-color: var(--color-blue);
  --text-button-font-family: var(--font-family-regular);

  --nav-button-font-size: 0.8rem;

  --success-message-color: hsl(130, 50%, 30%);
  --success-message-background: hsl(130, 50%, 90%);
  --error-message-color: hsl(0, 50%, 40%);
  --error-message-background: hsl(0, 50%, 90%);
  --error-color: hsl(0, 88%, 56%);

  --shadow-color: hsl(0, 0%, 80%);
  --hover-color: var(--table-row-hover-color);
  --h3-font-size: 1.1rem;
  --transition-duration: 0.2s;
  --transition-easing: ease;

  /* Gap/Spacing Tokens */
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 0.625rem;
  --gap-lg: 1rem;
  --gap-xl: 1.875rem;

  /* Padding Tokens */
  --padding-xs: 0.25rem;
  --padding-sm: 0.5rem;
  --padding-md: 0.625rem;
  --padding-lg: 1rem;
  --padding-button: 0.5rem 0.9375rem;
  --padding-button-small: 0.3125rem 0.625rem;

  /* Box Shadow Tokens */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.3125rem 0.9375rem var(--shadow-color);
  --shadow-focus: 0 0 0.3125rem var(--color-blue-light);

  /* Focus/Interaction States */
  --focus-ring-width: 0.125rem;
  --focus-ring-offset: 0.125rem;
  --focus-ring-color: var(--color-blue-light);
}

/* Dark Theme */
:root[data-theme="dark"] {
  /* Color Palette - Dark Mode */
  --color-blue: hsl(199, 47%, 55%);
  --color-blue-light: hsl(199, 47%, 65%);
  --color-blue-lighter: hsl(199, 55%, 54%);
  --color-blue-lightest: hsl(199, 47%, 85%);

  --color-secondary-blue: hsl(199, 80%, 45%);
  --color-secondary-blue-light: hsl(199, 69%, 73%);
  --color-secondary-blue-lighter: hsl(199, 80%, 75%);

  --color-green-accent: hsl(67, 76%, 52%);
  --color-orange: hsl(29, 91%, 54%);

  /* Warning colors - Dark Mode */
  --color-warning-background: hsl(45, 50%, 22%);
  --color-warning-border: hsl(45, 60%, 50%);
  --color-warning-text: hsl(45, 100%, 85%);

  --color-gray-darkest: hsl(0, 0%, 90%);
  --color-gray-dark: hsl(0, 0%, 80%);
  --color-gray-medium: hsl(0, 0%, 60%);
  --color-gray-light: hsl(0, 0%, 40%);
  --color-gray-lightest: hsl(0, 0%, 30%);
  --color-white: hsl(0, 0%, 15%);
  --color-black: hsl(0, 0%, 95%);

  /* Additional grays for consistency - Dark Mode */
  --color-gray-border: hsl(0, 0%, 40%);
  --color-gray-background: hsl(0, 0%, 18%);
  --color-gray-muted: hsl(0, 0%, 70%);
  --color-gray-disabled: hsl(0, 0%, 55%);

  /* Common UI colors - Dark Mode */
  --color-text-muted: hsl(0, 0%, 70%);
  --color-border-subtle: hsl(0, 0%, 35%);
  --color-red: hsl(0, 75%, 65%);
  --color-green: hsl(120, 55%, 55%);

  /* Container Backgrounds - Dark Mode */
  --container-background: hsl(199, 35%, 20%);

  /* Table Styles - Dark Mode */
  --even-row-color: hsl(0, 0%, 16%);
  --odd-row-color: hsl(0, 0%, 12%);
  --table-footer-background: hsl(0, 0%, 18%);
  --table-header-background: hsl(0, 0%, 20%);
  --table-header-font-color: var(--color-blue-lighter);
  --table-row-hover-color: hsl(199, 35%, 28%);

  /* App Styles - Dark Mode */
  --app-bar-background: hsl(199, 47%, 45%);
  --app-bar-color: hsl(0, 0%, 95%);
  --body-background-color: hsl(0, 0%, 12%);
  --border-color: var(--color-gray-light);
  --font-color: hsl(0, 0%, 90%);
  --heading-color: hsl(0, 0%, 95%);

  /* Button Styles - Dark Mode */
  --button-background: var(--color-blue);
  --button-color: hsl(0, 0%, 100%);
  --text-button-color: var(--color-blue-lighter);

  --success-message-color: hsl(130, 50%, 45%);
  --success-message-background: hsl(130, 40%, 22%);
  --error-message-color: hsl(0, 84%, 66%);
  --error-message-background: hsl(0, 40%, 22%);
  --error-color: hsl(0, 75%, 65%);

  --shadow-color: hsl(0, 0%, 5%);
  --hover-color: var(--table-row-hover-color);
}

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--body-background-color);
  color: var(--font-color);
  font-family: var(--font-family-regular);
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-easing);
}

a:hover {
  color: var(--color-blue-light);
}

.toast-container-success {
  position: fixed;
  top: 0;
  right: 5px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1rem;
  color: var(--success-message-color);
  background-color: var(--success-message-background);
}

.toast-container-error {
  position: fixed;
  top: 0;
  right: 5px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1rem;
  color: var(--error-message-color);
  background-color: var(--error-message-background);
}