/* --------------------------------------------------------------------------
 * APP STYLES FOR COLOR.COM MARKETING SITE – 2026
 * --------------------------------------------------------------------------
 *
 * Defines the layer ordering and imports app styles.
 * This file should ONLY import other CSS files.
 * Component styles are imported in the Astro component
 * as component.module.css and are scoped to the component.
 *
 * Author: @elyseholladay, @devchakraborty
 * Designer: @stumelvin
 *
 * --------------------------------------------------------------------------
 */


/* ----- Cascade Layers ----------------------------------------------------- */
/* Define the cascade layer order. The order in which layers
 * are defined in the stylesheet determines their precedence
 * in the cascade, with later-defined layers having higher priority.
 * This reduces the risk of specificity issues and need for !important,
 * and allows us to layer vendor styles we don't control.
 */
@layer reset, variables, utilities, overrides, vendor;

/* Overrides for styles injected into the page by the Apostrophe editor;
* this is unlayered, so that it can appropriately compete with the apos-bundle.css;
* I also had to wrap the first part of apos-bundle.css in :not[data-apos-refreshable],
* because unlayered styles will take precedence over layered styles.
* Ideally, Apostrophe could fix this in their CSS build. */
@import 'apostrophe.css';


/* ----- Reset & Starter ---------------------------------------------------- */
@import 'reset.css' layer(reset);


/* ----- Vendor ------------------------------------------------------------- */
/* Prioritizes third‑party/injected styles over app styles.
 * If you need to beat vendor styles in a specific component, add
 * page- or component-scoped rules in that component.
 */


/* ----- Variables ---------------------------------------------------------- */
/* These files should NOT export any classnames or generated CSS.
 * They only defining variables/tokens in :root.
 */
@import 'colors.css' layer(variables);
@import 'vars.css' layer(variables);
@import 'spacing.css' layer(variables);
@import 'typography.css' layer(variables);
@import 'radius.css' layer(variables);
@import 'shadows.css' layer(variables);
@import 'transitions.css' layer(variables);


/* ----- Utilities ---------------------------------------------------------- */
@import 'spacing-utils.css' layer(utilities);
@import 'typography-utils.css' layer(utilities);