:root {
  color-scheme: dark light;
  --primary-color: #FF4A4A;
  --secudary-color: #2F80ED;
}

[data-theme="light"] {
    color-scheme: light;
    --header-color: #F2F2F2;
    --background-color: #fff;
    --input-color: #F2F2F2;
    --text-color: #1A1A1A;
    --box-shadow: #00000026;
}

[data-theme="dark"] {
    color-scheme: dark;
    --header-color: #28292C;
    --background-color: #121212;
    --input-color: #28292C;
    --text-color: #fff;
    --box-shadow: #66666626;
}

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Montserrat', sans-serif;
}

button, input, select {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

input:focus,
select:focus {
  outline: none;
  box-shadow: none;
  border: none; 
}

body{
    width: 100%;
    height: 100dvh;
}

/* Toast Notifications - CSS Only */
.alert {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 300px;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.3s forwards, fadeOut 0.5s forwards 2.5s;
  z-index: 9999;
}

.alert-success {
  background-color: #28a745;
}

.alert-error {
  background-color: #dc3545;
}

.alert-warning {
  background-color: #ffc107;
  color: #212529;
}

.alert-info {
  background-color: #17a2b8;
}

@keyframes slideIn {
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes fadeOut {
  to {
      opacity: 0;
  }
}

/* Close button style - opcional */
.alert::after {
  content: "×";
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
}

.alert:hover::after {
  color: rgba(255, 255, 255, 0.8);
}