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

@layer base {
  :root { color-scheme: dark; }
  html.light { color-scheme: light; }
  * { scrollbar-color: #334155 transparent; scrollbar-width: thin; }
  body { @apply m-0 bg-[#080d14] font-sans antialiased text-slate-200; }
  html.light body { @apply bg-slate-50 text-slate-800; }
  button, input, select, textarea { font: inherit; }
}

@layer components {
  .ops-input {
    @apply rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-200 outline-none transition placeholder:text-slate-600 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30;
  }
  html.light .ops-input {
    @apply border-slate-300 bg-white text-slate-800 placeholder:text-slate-400;
  }
  .ops-btn-primary {
    @apply rounded-md bg-cyan-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-cyan-500 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .ops-btn-secondary {
    @apply rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm text-slate-300 transition hover:border-slate-600 hover:bg-slate-800;
  }
  html.light .ops-btn-secondary {
    @apply border-slate-300 bg-white text-slate-700 hover:bg-slate-100;
  }
  .ops-btn-ai {
    @apply rounded-md border border-slate-700 bg-slate-900/80 px-2.5 py-1.5 text-xs font-medium text-slate-300 transition hover:border-cyan-600 hover:bg-cyan-950/40 hover:text-cyan-300;
  }
  .ops-tab {
    @apply border-b-2 border-transparent px-4 py-3 text-xs font-medium text-slate-500 transition hover:text-slate-200;
  }
  .ops-tab-active {
    @apply border-cyan-500 text-cyan-300;
  }
  .ops-code {
    @apply rounded-md border border-slate-800 bg-[#070b11] p-3 font-mono text-xs leading-5 text-slate-300 outline-none focus:border-cyan-700;
  }
  .ops-panel {
    @apply border-slate-800 bg-slate-950/80;
  }
  html.light .ops-panel {
    @apply border-slate-200 bg-white;
  }
}