/**
 * Opal — Tailwind v4 reference file.
 *
 * Sourced by every opal CSS file via `@reference` so that `@apply` can resolve
 * both standard Tailwind utilities and the custom theme tokens defined in
 * `tailwind-preset.cjs` (e.g. `rounded-08`, `text-text-04`).
 *
 * Under Tailwind v4 each CSS file is processed independently by PostCSS, so
 * every standalone opal stylesheet that uses `@apply` must `@reference` this
 * file to have visibility into the design system's tokens.
 *
 * The bundler (`scripts/bundle-css.mjs`) concatenates all opal CSS into
 * `dist/styles.css` with this file first; redundant `@reference` directives
 * from other files are stripped during bundling so the published artifact is
 * self-contained.
 */

@import "tailwindcss";
@import "tw-animate-css";
@config "../tailwind-preset.cjs";
@import "@onyx-ai/shared/tokens.css";
@import "@onyx-ai/shared/typography.css";
@import "./styles/sizes.css";
@import "./styles/typography.css";

/* Applies when the primary input cannot hover (touch devices) — the
   complement of Tailwind v4's hover-gated `hover:`/`group-hover:` variants.
   Use it to keep hover-revealed controls visible on mobile, e.g.
   `opacity-0 group-hover:opacity-100 no-hover:opacity-100`. */
@custom-variant no-hover (@media (hover: none));