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

@layer base {
  :root {
    color-scheme: light;
  }
  .dark {
    color-scheme: dark;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100;
  }
}

@layer components {
  .card {
    @apply bg-white border-[1px] border-slate-200/70 shadow-soft dark:border-slate-800/70 dark:bg-slate-900/40;
    border-radius: 1rem; /* rounded-2xl */
  }

  .label {
    @apply text-sm font-semibold text-slate-800 dark:text-slate-200;
  }

  .help {
    @apply text-xs text-slate-500 dark:text-slate-400;
  }

  .input {
    @apply w-full rounded-xl border-[1px] border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 shadow-sm outline-none transition focus:border-slate-400 focus:ring-4 focus:ring-slate-200/60 dark:border-slate-800 dark:bg-slate-950/60 dark:text-slate-100 dark:focus:border-slate-600 dark:focus:ring-slate-800/60;
  }

  .select {
    @apply w-full rounded-xl border-[1px] border-slate-200 bg-white px-4 py-2.5 pr-10 text-sm text-slate-900 shadow-sm outline-none transition focus:border-slate-400 focus:ring-4 focus:ring-slate-200/60 dark:border-slate-800 dark:bg-slate-950/60 dark:text-slate-100 dark:focus:border-slate-600 dark:focus:ring-slate-800/60;
  }

  /* Unified button system (primary / secondary / ghost) */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-xl transition duration-150 ease-out will-change-transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-300 focus:ring-offset-white dark:focus:ring-offset-slate-900 active:translate-y-[1px];
  }

  .btn-primary {
    @apply text-white shadow-md btn bg-gradient-to-r from-indigo-600 to-blue-500 shadow-indigo-500/30 hover:from-indigo-600 hover:to-indigo-500 focus:ring-indigo-300 dark:focus:ring-indigo-500;
  }

  .btn-secondary {
    @apply bg-white border btn border-slate-300 text-slate-900 hover:bg-slate-50 focus:ring-slate-300 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 dark:focus:ring-slate-600;
  }

  .btn-ghost {
    @apply bg-transparent btn text-slate-700 hover:bg-slate-100 focus:ring-slate-200 dark:text-slate-200 dark:hover:bg-slate-800/60 dark:focus:ring-slate-700;
  }

  .pill {
    @apply inline-flex items-center border-[1px] border-slate-200 bg-slate-400 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200 transform duration-150 active:translate-y-[1px] dark:border-slate-800 dark:bg-slate-600 dark:text-slate-200 dark:hover:bg-slate-800/70 dark:focus:ring-slate-800;
    border-radius: 0.5rem; /* rounded-lg */
  }

  .toggle {
    @apply relative inline-flex items-center h-6 w-11 border-[1px] border-slate-200 bg-slate-100 dark:border-slate-800 dark:bg-slate-900 transition-all duration-200 ease-out shadow-inner;
    border-radius: 999px; /* rounded-full */
  }

  .toggle-dot {
    @apply inline-block w-5 h-5 transition translate-x-1 bg-white shadow-md dark:bg-slate-50;
    border-radius: 999px; /* rounded-full */
  }

  /* Stateful styling driven by aria-pressed for reliable visuals */
  .toggle[aria-pressed='true'] {
    @apply text-white border-transparent shadow-lg bg-gradient-to-r from-indigo-600 to-purple-500 shadow-indigo-500/30;
  }
  .toggle[aria-pressed='false'],
  .toggle:not([aria-pressed]) {
    @apply bg-slate-100 border-slate-200 dark:bg-slate-900 dark:border-slate-800;
  }
  .toggle[aria-pressed='true'] .toggle-dot {
    @apply translate-x-5 bg-white dark:bg-slate-900;
  }

  .kbd {
    @apply px-2 py-1 text-xs font-semibold bg-white border-[1px] rounded-lg border-slate-200 text-slate-700 dark:border-slate-800 dark:bg-slate-950/40 dark:text-slate-200;
  }

  .chip {
    @apply inline-flex items-center rounded-full border-[1px] border-slate-200/70 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-700 transition-transform duration-150 dark:border-slate-800/70 dark:bg-slate-950/40 dark:text-slate-200;
  }

  .skeleton {
    @apply relative overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800/50;
  }
  .skeleton::after {
    content: '';
    @apply absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/60 to-transparent dark:via-slate-700/40;
  }
  .pill.pill-active {
    @apply border-slate-900 bg-slate-900 text-slate-900 hover:bg-slate-800 dark:border-white dark:!bg-white/80 dark:!text-slate-900 dark:hover:bg-slate-200;
  }
  .wp-singular.twp-child-theme-namecraft-tt5-child-theme-landing-template-1
    .entry-content {
    max-width: 710px !important;
  }
}