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

html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  background: #f5f7fb;
  color: #111827;
}

.dark body {
  background: #07111f;
  color: #e6edf7;
}

@layer base {
  ::selection {
    background: #da5427;
    color: white;
  }
}

@layer components {
  .theme-toggle {
    @apply inline-flex items-center gap-2 rounded-lg border border-brand-secondary/25 bg-white px-3 py-2 text-sm font-semibold text-brand-ink shadow-sm transition hover:border-brand-primary hover:text-brand-primary dark:border-brand-secondary/50 dark:bg-brand-night dark:text-slate-100 dark:hover:border-brand-tertiary dark:hover:text-brand-tertiary;
  }

  .brand-panel {
    @apply rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900;
  }

  .brand-button {
    @apply inline-flex items-center justify-center rounded-lg bg-brand-primary px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-primaryDark disabled:cursor-not-allowed disabled:opacity-50;
  }

  .brand-button-secondary {
    @apply inline-flex items-center justify-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white;
  }

  .admin-card {
    @apply rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900;
  }

  .admin-input {
    @apply rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-brand-secondary focus:ring-2 focus:ring-brand-secondary/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100;
  }

  .admin-label {
    @apply grid gap-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400;
  }
}

@layer utilities {
  .dark .bg-white {
    background-color: #0f172a;
  }

  .dark .bg-slate-50,
  .dark .bg-slate-100 {
    background-color: #0b1626;
  }

  .dark .bg-brand-paper,
  .dark .bg-brand-mist {
    background-color: #07111f;
  }

  .dark .bg-slate-950 {
    background-color: #020617;
  }

  .dark .text-slate-950,
  .dark .text-slate-900,
  .dark .text-slate-800 {
    color: #e6edf7;
  }

  .dark .text-slate-600,
  .dark .text-slate-500 {
    color: #9fb0c8;
  }

  .text-slate-600 {
    color: #4b5563;
  }

  .text-slate-500 {
    color: #6b7280;
  }

  .dark .border-slate-200,
  .dark .border-slate-300 {
    border-color: #263449;
  }

  .dark .shadow-sm,
  .dark .shadow-xl {
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.32);
  }

  .dark input,
  .dark select {
    background-color: #101827;
    color: #e6edf7;
    border-color: #334155;
  }
}