/*
 * The Rooster admin chrome, authored in Tailwind CSS v4 (the house standard: Metronic 9 on the Rooster panel, the
 * partner portal and rooster.systems). `npm run build:css` compiles this file to ../chrome.css, which is what ships;
 * nothing of Tailwind runs on a site.
 *
 * The pattern (docs/DISPARITIES.md, "Tailwind for the chrome"): Tailwind is the authoring system, the semantic
 * classes are the contract. Every class the PHP prints and the script reads (rooster-admin-pill, rooster-admin-card,
 * data-ra-*) is a recipe below, written with @apply from the token scale (theme.css) OUTSIDE Tailwind's layers, so
 * the compiled rule is ordinary CSS with the specificity it needs to win over wp-admin's unlayered stylesheets
 * (a raw utility on the markup would lose to forms.css). Plain declarations stay where CSS does something the scale
 * has no word for: color-mix() with the runtime variables, text-box trimming, forced colours. No preflight: the
 * chrome sits inside wp-admin and never resets it. Logical properties throughout (right-to-left for free).
 */

/* No automatic source scanning (source(none)): the markup carries no raw utilities, so only the recipes below
   compile; a utility a product wants on its own screens goes into a recipe here, never into the markup. */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);
@import "./tokens.css";
@import "./theme.css";
@import "./utilities.css";
@import "./adopt.css";
/* The products' alias files (adopt/<product>.css) are not imported here: each compiles on its own through
   adopt-<product>.css (0.31.0) and loads only on a site where that product is registered. */
@import "./kit.css";
@import "./fields.css"; /* R2, fields (0.59.0) */
@import "./states.css"; /* R3 (0.60.0): states and feedback */
@import "./guidance.css"; /* the guidance level, the tips and the text roles (0.61.0, R4) */
@import "./more.css"; /* 0.63.1: a wizard's rail of links, a stat's tip, the funnel chart */

/* The dark variant (0.24.0): the few rules a token swap cannot cover (the lockup, the page around the chrome),
   under the explicit class or, in auto, the device's preference. A product's own stylesheet uses the same two hooks. */
/* stylelint-disable nesting-selector-no-missing-scoping-root -- Tailwind's form: & is the rule the variant applies to */
@custom-variant dark {
	&:where(.rooster-admin-dark, .rooster-admin-dark *) {
		@slot;
	}

	@media (prefers-color-scheme: dark) {
		&:where(.rooster-admin-scheme-auto, .rooster-admin-scheme-auto *) {
			@slot;
		}
	}
}
/* stylelint-enable nesting-selector-no-missing-scoping-root */

/* The chrome's own recipes, one file per section (0.75.0), in their order: the page around the chrome, the base, the
   brand bar, the menu bar, the cards, the board, the settings screens, the form pieces, the Home, the dialogs, the
   palette, the narrower screens. front-app.css imports the sections an application page shares (the cards, the
   field rows, the checks, the form pieces, the dialog, the narrow field rows) in the same order. */
@import "./chrome/page.css";
@import "./chrome/base.css";
@import "./chrome/topbar.css";
@import "./chrome/menubar.css";
@import "./chrome/cards.css"; /* the card: front-app.css imports it too */
@import "./chrome/board.css";
@import "./chrome/settings.css"; /* the settings screen's width, the page head */
@import "./chrome/field-rows.css"; /* the field rows: front-app.css imports them too */
@import "./chrome/settings-controls.css";
@import "./chrome/checks.css"; /* the checks grid, a check's box on its line: front-app.css imports it too */
@import "./chrome/form.css"; /* the form pieces (0.7.0): front-app.css imports them too */
@import "./chrome/home-hero.css";
@import "./chrome/home-catalogue.css";
@import "./chrome/dialogs.css"; /* the dialog's recipe: front-app.css imports it too */
@import "./chrome/chrome-dialogs.css"; /* the feedback dialog and the welcome */
@import "./chrome/palette.css";
@import "./chrome/narrow.css";
@import "./chrome/narrow-fields.css"; /* the field rows on a narrow screen and in a narrow card: front-app.css imports them too */
@import "./chrome/narrow-rest.css";