Unlayered CSS always wins over Tailwind's @layer utilities, so the
bare * { margin: 0 } reset was overriding mx-auto everywhere. Moving
it into @layer base restores correct cascade order.
63 lines
1.3 KiB
CSS
63 lines
1.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Terminal-Noir palette */
|
|
--color-bg: #0a0a0a;
|
|
--color-surface: #111111;
|
|
--color-surface-raised: #1a1a1a;
|
|
--color-border: #2a2a2a;
|
|
--color-border-bright: #444444;
|
|
--color-text: #e8e8e8;
|
|
--color-text-label: #666666;
|
|
--color-text-dim: #444444;
|
|
--color-accent-green: #00cc44;
|
|
--color-accent-red: #cc2200;
|
|
|
|
/* Typography */
|
|
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
|
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Breakpoints */
|
|
--breakpoint-xs: 576px;
|
|
|
|
/* Animations */
|
|
--animate-fade-in: fadeIn 120ms linear forwards;
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
}
|
|
|
|
/* Base */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Default transitions — linear, fast */
|
|
a,
|
|
button {
|
|
transition: color 120ms linear, border-color 120ms linear,
|
|
background-color 120ms linear, opacity 120ms linear;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|