@import 'tailwindcss';

/* JS plugins. Tailwind v4 supports `@plugin` for both v3-style JS plugins and
 * v4-native packages. */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@import 'tw-animate-css';

/* Per-theme overrides for semantic --background-/--foreground-/--brand-*
 * tokens. Radix/scale/brand --color-* values are inlined directly in
 * colors.css below. */
@import '../ui/build/css/source/global.css';
@import '../ui/build/css/themes/dark.css';
@import '../ui/build/css/themes/light.css';

/* Reset Tailwind's built-in color tokens before re-defining our own, so e.g.
 * --color-amber-* doesn't ship a default Tailwind value alongside the Radix
 * one. */
@import './unset-tw-colors.css';

/* Theme tokens + utilities + variants + base layer. colors.css declares the
 * Radix/scale/brand --color-* CSS variables with per-theme values; theme.css
 * consumes them from @theme inline so Tailwind generates the utilities. */
@import './css/colors.css';
@import './css/theme.css';
@import './css/animations.css';
@import './css/utilities.css';
@import './tailwind-plugins/hit-area.css';
@import './css/variants.css';
@import './css/base.css';

/*
 * Typography prose / prose-toc / prose-docs overrides live in a focused JS
 * config because @tailwindcss/typography reads its theme.typography options
 * from the JS config — not from CSS @theme tokens. See:
 * https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
 */
@config './typography.config.js';