@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color: #0f172a;
  background: #f1f5f9;
  font-family: "Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
}

:root.dark {
  color: #e2e8f0;
  background: #0b1220;
  color-scheme: dark;
}

:root,
html,
body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
}

.dashboard-bg {
  background: #f1f5f9;
}

:root.dark .dashboard-bg {
  background: #0b1220;
}

:root.dark .border-slate-200 {
  border-color: #1f2937;
}

:root.dark .border-slate-300 {
  border-color: #334155;
}

:root.dark .bg-white\/80 {
  background-color: rgba(15, 23, 42, 0.8);
}

:root.dark .bg-white {
  background-color: #0f172a;
}

:root.dark .bg-slate-50 {
  background-color: #0b1220;
}

:root.dark .bg-slate-100 {
  background-color: #111827;
}

:root.dark .bg-slate-900 {
  background-color: #1f2937;
}

:root.dark .bg-emerald-50 {
  background-color: #0f2a23;
}

:root.dark .border-emerald-200 {
  border-color: #14532d;
}

:root.dark .bg-amber-50 {
  background-color: #2a1f0f;
}

:root.dark .border-amber-200 {
  border-color: #7c5e10;
}

:root.dark .bg-rose-50 {
  background-color: #2a1115;
}

:root.dark .border-rose-200 {
  border-color: #7f1d1d;
}

:root.dark .text-emerald-800 {
  color: #6ee7b7;
}

:root.dark .text-amber-800 {
  color: #fcd34d;
}

:root.dark .text-rose-800 {
  color: #fda4af;
}

:root.dark .text-slate-900 {
  color: #f8fafc;
}

:root.dark .text-slate-700 {
  color: #cbd5f5;
}

:root.dark .text-slate-600,
:root.dark .text-slate-500 {
  color: #94a3b8;
}

:root.dark .text-slate-400 {
  color: #64748b;
}

:root.dark .text-slate-200,
:root.dark .text-slate-100,
:root.dark .text-white {
  color: #e2e8f0;
}

.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, 92vw);
}

@media (max-width: 768px) {
  .toast-stack {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  :root {
    font-size: 16px;
  }

  .max-w-6xl {
    max-width: 100%;
  }

  .px-6 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .py-6 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  body {
    font-weight: 500;
  }

  .text-sm {
    font-size: 0.95rem;
  }

  .text-xs {
    font-size: 0.8rem;
  }

  .text-lg {
    font-size: 1.1rem;
  }

  input,
  select,
  button,
  textarea {
    font-size: 16px;
  }
}
