@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  /* ===== Primária (azul da logo) ===== */
  --color-primary-50: #f0f5f9;
  --color-primary-100: #dde9f3;
  --color-primary-200: #bed6e9;
  --color-primary-300: #8fb9dc;
  --color-primary-400: #5a9ace;
  --color-primary-500: #357fbb;
  --color-primary-600: #2b699c;
  --color-primary-700: #265d8a;
  --color-primary-800: #23547c; /* cor exata da logo */
  --color-primary-900: #193b57;
  --color-primary-950: #132839;

  /* ===== Neutros (cinza azulado) ===== */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* ===== Semânticas ===== */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0891b2;

  /* ===== Accent (dourado, complementar ao azul) ===== */
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
}

[data-theme="dark"] {
  --color-gray-50: #0f172a;
  --color-gray-100: #1e293b;
  --color-gray-200: #334155;
  --color-gray-300: #475569;
  --color-gray-400: #64748b;
  --color-gray-500: #94a3b8;
  --color-gray-600: #cbd5e1;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f1f5f9;
  --color-gray-900: #f8fafc;

  --color-primary-500: #5a9ace;
}

* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border-color: var(--color-primary-800);
  color: var(--color-primary-800);
}
input::placeholder {
  color: var(--color-primary-800);
  opacity: 1;
}

input:focus {
  border-color: var(--color-primary-800);
  outline: none;
}

/* styles */
.peer:checked + span {
  background-color: #22c55e;
}

.peer:checked + span::after {
  transform: translateX(1.25rem);
}

.bg-primary {
  background-color: var(--color-primary-800);
}

.btn {
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;

  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.btn-danger {
  border: 1px solid #B8323C;
  background-color: #B8323C;
  color: #fff;
}

.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: scale(0.97);
}

.icon {
  width: 40px;
  height: 40px;
  margin-left: 0px;
  margin-right: 0px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32px;
  color: var(--color-primary-800);
}

.text-primary {
  color: var(--color-primary-800);
}

/* borders */
.border-primary {
  border: 1px solid var(--color-primary-800);
}