:root {
  --color-primary: #eab308;      /* Vial yellow */
  --color-primary-strong: #ca8a04;
  --color-accent: #f97316;       /* Secondary accent (orange) */
  --color-bg: #0b1220;           /* Deep navy */
  --color-surface: #0f172a;      /* Slate surface */
  --color-surface-2: #0c1626;    /* Darker surface */
  --color-text: #e2e8f0;         /* Light text */
  --color-muted: #94a3b8;        /* Muted slate */
  --color-border: #1e293b;       /* Slate border */
}

:root.theme-light {
  --color-primary: #eab308;      /* Vial yellow */
  --color-primary-strong: #ca8a04;
  --color-accent: #f97316;
  --color-bg: #eef2ff;           /* Soft indigo background */
  --color-surface: #ffffff;      /* Clean card surface */
  --color-surface-2: #e2e8f0;    /* Muted surface */
  --color-text: #0f172a;         /* Deep navy text */
  --color-muted: #475569;        /* Slate muted */
  --color-border: #cbd5e1;       /* Light border */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  overscroll-behavior-y: none;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #171717; }
::-webkit-scrollbar-thumb { background: #404040; }
::-webkit-scrollbar-thumb:hover { background: #eab308; }

input, select, textarea { accent-color: var(--color-primary); }
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom); }

/* Make date/datetime pickers visible on dark backgrounds */
.date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Light mode overrides for common Tailwind utility classes */
.theme-light .bg-neutral-950 { background-color: var(--color-bg) !important; color: var(--color-text) !important; }
.theme-light .bg-neutral-900 { background-color: var(--color-surface) !important; color: var(--color-text) !important; }
.theme-light .bg-neutral-800 { background-color: var(--color-surface-2) !important; }
.theme-light .bg-black { background-color: #0f172a !important; color: #0f172a !important; }
.theme-light .bg-slate-100 { background-color: var(--color-bg) !important; }
.theme-light .bg-slate-50 { background-color: var(--color-surface) !important; }
.theme-light .border-neutral-800,
.theme-light .border-neutral-700,
.theme-light .border-slate-200 { border-color: var(--color-border) !important; }
.theme-light .text-neutral-100,
.theme-light .text-white,
.theme-light .text-slate-900 { color: var(--color-text) !important; }
.theme-light .text-neutral-400,
.theme-light .text-neutral-500,
.theme-light .text-neutral-600,
.theme-light .text-slate-700 { color: var(--color-muted) !important; }
.theme-light .text-yellow-500 { color: var(--color-primary) !important; }
.theme-light .bg-neutral-900 .text-neutral-500 { color: var(--color-muted) !important; }

/* Brand accent overrides for both themes */
.bg-yellow-500 { background-color: var(--color-primary) !important; color: #0f172a !important; }
.hover\\:bg-yellow-400:hover { background-color: var(--color-primary-strong) !important; }
.text-yellow-500 { color: var(--color-primary) !important; }
.border-yellow-500 { border-color: var(--color-primary) !important; }
.bg-yellow-500.text-black { color: #0f172a !important; }

/* Force any residual sky/cyan utilities to yellow */
.bg-sky-500, .bg-sky-400, .bg-cyan-500, .bg-cyan-400 { background-color: #eab308 !important; }
.text-sky-500, .text-sky-400, .text-cyan-500, .text-cyan-400 { color: #eab308 !important; }
.border-sky-500, .border-sky-400, .border-cyan-500, .border-cyan-400 { border-color: #eab308 !important; }
.ring-sky-500, .ring-sky-400, .ring-cyan-500, .ring-cyan-400 { --tw-ring-color: #eab308 !important; }