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

@layer base {
    html {
        color-scheme: light;
    }

    html.dark {
        color-scheme: dark;
    }

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

    [x-cloak] {
        display: none !important;
    }
}

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

    .tse-muted {
        @apply text-slate-600 dark:text-slate-400;
    }

    .tse-control {
        @apply rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100;
    }

    .tse-secondary-action {
        @apply inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800;
    }
}