*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

:root {
  --primary: #0a3d7a;
  --primary-op4: rgba(10, 61, 122, 0.4);
  --primary-light: #5fa9e6;
  --secondary: #1e6bb8;
  --accent: #f57c00;
  --background: #ffffff;
  --card: #dfeeff;
  --card-op5: rgba(223, 238, 255, 0.5);
  --text: #212121;
  --text-muted: #616161;
  --text-on-primary: #ffffff;

  --success-light: #d6ffd6;
  --error-light: #ffd6d6;
  --warning-light: #ffecd6;

  --success: #00ff00;
  --error: #ff0000;
  --warning: #ff7b00;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
}

#root {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background-color: var(--background);
  color: var(--text);
}

#modal-root {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Sora", sans-serif;
}

button {
  cursor: pointer;
  background-color: var(--primary);
  color: var(--text-on-primary);
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 0px 5px var(--primary);
}

button:hover {
  background-color: var(--secondary);
  box-shadow: 0px 0px 5px var(--secondary);
}

a {
  text-decoration: none;
  color: inherit;
}