154 lines
3.1 KiB
CSS
154 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Theme is toggled by a `.dark` class on <html> (see ThemeProvider). */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--color-brand-50: #eef2ff;
|
|
--color-brand-100: #e0e7ff;
|
|
--color-brand-200: #c7d2fe;
|
|
--color-brand-400: #818cf8;
|
|
--color-brand-500: #6366f1;
|
|
--color-brand-600: #4f46e5;
|
|
--color-brand-700: #4338ca;
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--surface: #ffffff;
|
|
--surface-muted: #f8fafc;
|
|
--border: #e2e8f0;
|
|
--text: #0f172a;
|
|
--text-muted: #52607a;
|
|
color-scheme: light;
|
|
}
|
|
|
|
.dark {
|
|
--surface: #0b1120;
|
|
--surface-muted: #111827;
|
|
--border: #1f2937;
|
|
--text: #e5e7eb;
|
|
--text-muted: #94a3b8;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
@layer components {
|
|
.page {
|
|
@apply mx-auto w-full max-w-6xl px-5;
|
|
}
|
|
|
|
.surface {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-2xl border p-6;
|
|
background: var(--surface-muted);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* All button variants share the base rule (Tailwind v4 cannot @apply a custom class). */
|
|
.btn,
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-ghost,
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition;
|
|
}
|
|
.btn:disabled,
|
|
.btn-primary:disabled,
|
|
.btn-secondary:disabled,
|
|
.btn-ghost:disabled,
|
|
.btn-danger:disabled {
|
|
@apply cursor-not-allowed opacity-60;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply text-white;
|
|
background: var(--color-brand-600);
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: var(--color-brand-700);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply border;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.btn-ghost {
|
|
color: var(--text-muted);
|
|
}
|
|
.btn-ghost:hover:not(:disabled) {
|
|
background: var(--surface-muted);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-red-600 text-white;
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
@apply bg-red-700;
|
|
}
|
|
|
|
.label {
|
|
@apply mb-1 block text-sm font-medium;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full rounded-lg border px-3 py-2 text-sm outline-none;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
.input:focus {
|
|
border-color: var(--color-brand-500);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
|
|
}
|
|
}
|
|
|
|
/* Visible keyboard focus everywhere (WCAG 2.4.7). */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-brand-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|