/**
 * The shared token layer.
 *
 * Register this as a dependency rather than relying on enqueue order. The layer
 * order itself is not here: it is declared by the block that puts every other
 * sheet on the page into a layer, in avia-common-helper/includes/css-cascade.php,
 * which is the only file that can guarantee its statement comes first.
 *
 * This file is exempt from that block, so its own layer is the one below and
 * nothing nests it. Being in a layer at all is immaterial to what it does --
 * custom properties on :root are contested by nobody -- and it keeps the tokens
 * where a component can override them by declaring in a later layer.
 */

/*
 * Naming. One prefixed root per component, hyphens all the way down:
 * .avia-courses, .avia-courses-header, .avia-courses-toolbar. The avia- prefix is
 * what makes a name unique in a flat namespace, and that is the only thing a
 * BEM __ was buying here. The boundary it draws does not survive a tree deeper
 * than two levels anyway: avia-plan-card__gauge-track already spells level two
 * with a hyphen, because block__el__el is not allowed.
 *
 * Variants go on an attribute, not a second class: [data-scope="mine"] rather
 * than a --mine modifier. An attribute selector weighs the same as a class, so
 * nothing in the cascade changes, but an attribute holds a value, so a set of
 * mutually exclusive variants becomes one hook that cannot be combined into
 * nonsense. Where the platform already exposes the state, read it there --
 * aria-expanded, :has(), :empty -- instead of mirroring it into a class.
 *
 * Do not add a variant hook before a rule needs one. The two section modifiers
 * the courses page shipped with styled nothing: the grammar had a slot, so the
 * slot got filled.
 */

@layer avia-tokens {
	:root {
		/*
		 * Colour maps onto the theme's own options, which reach the page as
		 * --bb-* custom properties in an inline <style> on wp_head:99. Each
		 * fallback is that option's default from the theme's 'default' colour
		 * preset, not a guess: the same --bb-* token was previously written with
		 * up to 19 different fallbacks across our stylesheets, including two
		 * tenant brand colours baked into shared code.
		 *
		 * This is the only file allowed to name a --bb-* token. Components read
		 * --avia-* so a rebinding happens here once.
		 *
		 * To re-theme one of our components on a subtree, set the --avia-*
		 * token on it. Setting a --bb-* there will not move the --avia-* alias,
		 * which is resolved here on :root and inherits down already resolved.
		 *
		 * It does move vendor CSS, though, and that is a lever worth knowing:
		 * learndash.css reads var(--bb-*) 789 times and theme.css 761, and
		 * var() resolves against the element the vendor rule applies to. So a
		 * --bb-* declared on a wrapper of ours re-themes the vendor markup
		 * inside it with no cascade conflict at all, because it sets a property
		 * on a different element rather than competing for the same
		 * declaration. Check first whether the child theme has already
		 * hardcoded over the token: much of the course card has.
		 */
		--avia-color-accent: var(--bb-primary-color, #385dff);
		--avia-color-accent-rgb: var(--bb-primary-color-rgb, 56, 93, 255);
		--avia-color-accent-contrast: var(--bb-primary-button-text-regular, #fff);

		--avia-color-text: var(--bb-body-text-color, #5a5a5a);
		--avia-color-heading: var(--bb-headings-color, #1e2132);
		--avia-color-muted: var(--bb-alternate-text-color, #9b9c9f);

		--avia-color-surface: var(--bb-content-background-color, #fff);
		--avia-color-surface-alt: var(--bb-content-alternate-background-color, #f2f4f5);
		--avia-color-page: var(--bb-body-background-color, #fafbfd);
		--avia-color-border: var(--bb-content-border-color, #d6d9dd);

		/*
		 * A fill that is guaranteed to read against the surface it sits on.
		 * The theme's own alternate background is a near-white (#f2f4f5 by
		 * default) that disappears on the #fafbfd page, so tinting the heading
		 * colour into the surface is the only way to keep a subtle fill visible
		 * across tenant palettes, including the dark ones.
		 */
		--avia-color-fill-subtle: color-mix(in oklab, var(--avia-color-heading) 8%, var(--avia-color-surface));

		--avia-color-success: var(--bb-success-color, #14b550);
		--avia-color-warning: var(--bb-warning-color, #ed9615);
		/* Yellow row highlight, separate from the theme's orange warning ink. */
		--avia-color-warning-surface: color-mix(in srgb, #ffc107 20%, var(--avia-color-surface));
		--avia-color-danger: var(--bb-danger-color, #db222a);
		/*
		 * The one status the platform does not ship a variable for -- measured, no
		 * tenant defines --bb-info-color -- so in practice this is the literal, and
		 * the var() is there for a theme that ever adds one. Nothing paints with it
		 * today -- the dial that did now takes the brand, the success dial beside
		 * it having been the reason to avoid the brand -- and it stays so the
		 * status set is whole rather than three quarters of one.
		 */
		--avia-color-info: var(--bb-info-color, #007cff);


		/*
		 * Type. Sizes are px because the estate is px throughout and a rem scale
		 * would inherit whatever root size each page happens to set. 13px and
		 * 14px both earn a step: they are the two most used sizes in the
		 * codebase and neither is the other's rounding error. 24px earns one as
		 * the theme's own h2.
		 *
		 * -xl went to the design file's 20px and came back to 22 on the CEO's
		 * "not enough": 22 is what the learning plan card's title rendered at when
		 * he pointed at it and asked for course names to match. The file's 20 is
		 * Heading/H3, but the file is a snapshot of the old site rather than a
		 * brief, so it loses to someone naming the size they want.
		 */
		--avia-text-2xs: 10px;
		--avia-text-xs: 12px;
		--avia-text-sm: 13px;
		--avia-text-base: 14px;
		--avia-text-md: 16px;
		--avia-text-lg: 18px;
		--avia-text-xl: 22px;
		--avia-text-2xl: 24px;
		--avia-text-3xl: 28px;

		/* Spacing on a 4px base, covering the cluster the estate already uses. */
		--avia-space-1: 2px;
		--avia-space-2: 4px;
		--avia-space-3: 8px;
		--avia-space-4: 12px;
		--avia-space-5: 16px;
		--avia-space-6: 20px;
		--avia-space-7: 24px;
		--avia-space-8: 32px;

		/*
		 * Radii follow the theme's sharp preset, which is what theme_style
		 * defaults to. A site switched to the rounded preset moves all three
		 * together, because these read the same tokens the theme sets.
		 */
		--avia-radius-sm: var(--bb-input-radius, 4px);
		--avia-radius-md: var(--bb-block-radius-inner, 4px);
		--avia-radius-lg: var(--bb-block-radius, 4px);
		--avia-radius-pill: 999px;

		/*
		 * Weight. Four steps, taken from where the estate settles: 600 (59
		 * declarations), 500 (35), 700 (26), 400 (17). It also contains 550,
		 * 560, 620, 650 and 900, once or twice each, and those are the argument
		 * for a scale rather than a matter of taste -- nobody reviewing a page
		 * can tell 620 from 600, so they are variation that carries no meaning.
		 */
		--avia-weight-normal: 400;
		--avia-weight-medium: 500;
		--avia-weight-semibold: 600;
		--avia-weight-bold: 700;

		/*
		 * Line height, unitless so it scales with whatever size the element
		 * ends up at. 1 (28), 1.5 (14), 1.4 (9), 1.3 (9), 1.2 (7), 1.35 (5)
		 * and 1.6 (5) are in use; 1.3, 1.35 and 1.4 are one step here, since
		 * the difference between them is under a pixel at every size on the
		 * type scale. The px line heights the estate also holds -- 20px, 24px,
		 * 28px, 30px -- are not on the scale on purpose: they stop tracking
		 * the moment the font size changes, which is what a token exists to
		 * prevent.
		 */
		--avia-leading-none: 1;
		--avia-leading-tight: 1.2;
		--avia-leading-snug: 1.35;
		--avia-leading-normal: 1.5;

		/*
		 * Elevation. -raised is the theme's own value for a lifted card,
		 * copied from learndash.css verbatim so a card of ours lifts by the
		 * same amount as everything else the theme lifts.
		 *
		 * -md is the Figma file's own shadow-md now, rather than the 0 8px 24px
		 * it was seeded with. Two layers with a negative spread lift something
		 * the size of a control; a single 24px blur lifts a panel, and a 35px
		 * chip is not a panel. Safe to retune because neither -sm nor -md had a
		 * caller -- -raised was the only one of the three anything consumed.
		 */
		--avia-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
		--avia-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
		--avia-shadow-raised: 0 4px 32px 0 rgba(18, 43, 70, 0.1);

		/*
		 * The focus ring. Ten rules already draw one this way; twenty-four
		 * write outline: none, which is the reason this belongs in a token --
		 * a ring is routinely removed and then has to be put back, and there
		 * was no single thing to put back. Restore it with
		 * outline: var(--avia-focus-width) solid var(--avia-focus-color).
		 */
		--avia-focus-width: 2px;
		--avia-focus-offset: 2px;
		--avia-focus-color: var(--avia-color-accent);

		/*
		 * Motion. 0.15s already accounts for twenty of the transitions in the
		 * estate, 0.3s for ten and 0.2s for seven, so the scale is three steps
		 * and the easing is the one every one of them uses.
		 */
		--avia-duration-fast: 0.15s;
		--avia-duration-base: 0.2s;
		--avia-duration-slow: 0.3s;
		--avia-ease: ease;

		/*
		 * Stacking, among our own elements only. The estate currently holds
		 * 1, 2, 5, 9, 10, 99, 100, 999, 9999 and 999999, which is what a ladder
		 * with no rungs looks like.
		 *
		 * Read the ceiling as a rule, not a limit: a stacking context of our
		 * own always beats a sibling's z-index, and never beats its parent's
		 * context, so a component that needs more than -overlay is not short of
		 * a number -- it is painting into the wrong context.
		 */
		--avia-z-base: 1;
		--avia-z-raised: 2;
		--avia-z-sticky: 10;
		--avia-z-dropdown: 100;
		--avia-z-overlay: 1000;
	}

	/*
	 * One place to honour the preference. A rule that reads a duration token
	 * gets this for free; a rule that hardcodes a duration does not, which is
	 * the practical reason to use the token.
	 */
	@media (prefers-reduced-motion: reduce) {
		:root {
			--avia-duration-fast: 0s;
			--avia-duration-base: 0s;
			--avia-duration-slow: 0s;
		}
	}
}

/*
 * Breakpoints are not tokens: var() is invalid inside a media query, so a
 * --avia-bp-* would be documentation pretending to be mechanism. The canonical
 * values, taken from what the estate already queries, are 480px, 768px, 1100px
 * and 1200px. Use those literals.
 */