/* CSS Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Primary Green */
  --primary-50: #edf7f1;
  --primary-100: #d3eadc;
  --primary-200: #a7d5b9;
  --primary-300: #7bbf96;
  --primary-400: #4faa73;
  --primary-500: #1f7a44;
  --primary-600: #1b6b3c;
  --primary-700: #155531;
  --primary-800: #0f3f25;
  --primary-900: #09291a;

  /* Secondary Beige */
  --secondary-500: #9b8b6f;

  /* Semantic Colors */
  --destructive: #e41e26;
  --success: #1f7a44;
  --warning: #d97706;

  /* Status Colors */
  --yellow-100: #fef3c7;
  --yellow-800: #92400e;
  --blue-100: #dbeafe;
  --blue-800: #1e40af;
  --green-100: #d1fae5;
  --green-800: #065f46;
  --red-100: #fee2e2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  line-height: inherit;
  color: #111827;
}

/* Dark Mode Styles - removed color-scheme to prevent browser dark mode interference */

/* Styled Toggle Checkbox */
.toggle-checkbox {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.2s;
  border-radius: 24px;
}

.toggle-slider {
  background-color: #e5e7eb;
}

.dark .toggle-slider {
  background-color: #525252;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.toggle-checkbox input:checked + .toggle-slider {
  background-color: #1f7a44;
}

.dark .toggle-checkbox input:checked + .toggle-slider {
  background-color: #22c55e;
}

.toggle-checkbox input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(31, 122, 68, 0.5);
}

.toggle-checkbox input:checked + .toggle-slider:before {
  transform: translateX(20px);
}