/* --- Light Mode (Default) --- */
body {
  font-family: "Inter", sans-serif;
  background-color: #f9fafb; /* gray-50 */
  color: #111827; /* gray-900 */
}

.calculator-card {
  background-color: #ffffff; /* white */
  border: 1px solid #e5e7eb; /* gray-200 */
  transition: all 0.3s ease-in-out;
}

html {
  transition: background-color 0.3s, color 0.3s;
}

.dark .result-box {
  transition: all 0.3s ease-in-out;
}

.result-box {
  border-left: 4px solid;
  transition: all 0.3s ease-in-out;
}

.formula-box {
  font-family: "Courier New", Courier, monospace;
  background-color: #e5e7eb; /* gray-200 */
  color: #1f2937; /* gray-800 */
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  white-space: pre;
}

input,
select {
  background-color: #f3f4f6; /* gray-100 */
  border: 1px solid #d1d5db; /* gray-300 */
  color: #111827; /* gray-900 */
}

input:focus,
select:focus {
  --tw-ring-color: #4f46e5; /* indigo-600 */
}

/* --- Dark Mode --- */
.dark body {
  background-color: #111827; /* gray-900 */
  color: #f3f4f6; /* gray-100 */
}

.dark .calculator-card {
  background-color: #1f2937; /* gray-800 */
  border: 1px solid #374151; /* gray-700 */
}

.dark .formula-box {
  background-color: #374151; /* gray-700 */
  color: #d1d5db; /* gray-300 */
}

.dark input,
.dark select {
  background-color: #374151; /* gray-700 */
  border: 1px solid #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}