/**
 * VolunteerPress design tokens — the shared front-end (and future admin) token
 * layer.
 *
 * This is the one place the plugin's *composition* is defined: a spacing scale,
 * a shape/radius language, a type scale, a theme-derived accent, and semantic
 * state colours. Every VolunteerPress front-end surface (the calendar today; the
 * opportunity cards, shift sheet, signup form, and later the admin polish) is
 * meant to compose against these same tokens so the whole plugin reads as one
 * product rather than a set of unrelated widgets.
 *
 * Chameleon-with-an-opinion: VolunteerPress owns the structure (scale, shape,
 * states) but *colour and typography derive from the host theme*. The accent is
 * the theme's own link/accent colour, not an invented brand colour; sizes are
 * relative so they ride the theme's font size; surfaces/borders are tinted from
 * the local text colour so they adapt to light and dark themes on their own.
 *
 * How another surface adopts this layer:
 *   1. Make its stylesheet depend on the `vpress-tokens` handle (see
 *      VolunteerPress\Frontend\Tokens) so the tokens load with it — and only on
 *      pages that render the surface, honouring the performance corollary.
 *   2. Reference the tokens below. Any element carrying a `vpress-` class already
 *      inherits the surface/border tokens, so a new surface gets them for free.
 *
 * Each token group notes what it derives from and its fallback.
 */

:root {
	/*
	 * Spacing — the scale is owned (a deliberate, consistent rhythm). Only the
	 * outer block gap derives from the theme: `--wp--style--block-gap` (the theme's
	 * base spacing between blocks), falling back to the scale's --vpress-space-5.
	 */
	--vpress-space-1: 0.25rem;
	--vpress-space-2: 0.5rem;
	--vpress-space-3: 0.75rem;
	--vpress-space-4: 1rem;
	--vpress-space-5: 1.5rem;
	--vpress-space-6: 2rem;
	--vpress-gap: var( --wp--style--block-gap, var( --vpress-space-5 ) );

	/*
	 * Shape — an opinionated, softly-rounded language is part of the plugin's
	 * identity. Derives from a theme custom radius if one is exposed
	 * (`--wp--custom--border-radius`); otherwise the owned defaults below.
	 */
	--vpress-radius: var( --wp--custom--border-radius, 0.625rem );
	--vpress-radius-sm: 0.375rem;
	--vpress-radius-pill: 999px;

	/*
	 * Type — the font FAMILY is inherited from the theme (never forced); the
	 * SIZE is owned. A dense management UI must read as compact chrome, quieter
	 * and smaller than the theme's reading prose (Twenty Twenty-Five's large body
	 * text would otherwise inflate the whole calendar). The scale is therefore a
	 * small, tight rem scale — anchored to the root (~16px), not to the theme's
	 * inflated body em — so it stays compact under any theme. Hierarchy comes from
	 * weight and a little size, not from large text. Fallbacks match the owned
	 * values (there is no theme size to derive here).
	 */
	--vpress-font: inherit;
	--vpress-font-size: 0.875rem; /* ~14px — the owned compact UI base. */
	--vpress-line: 1.45; /* restrained base line-height. */
	--vpress-line-tight: 1.25; /* headings, chips, single-line labels. */
	--vpress-text-xs: 0.6875rem; /* ~11px — pills, weekday headers, chips. */
	--vpress-text-sm: 0.75rem; /* ~12px — availability, time, secondary. */
	--vpress-text-md: 0.8125rem; /* ~13px — controls, body. */
	--vpress-text-lg: 0.9375rem; /* ~15px — opportunity title anchor. */
	--vpress-text-xl: 1.0625rem; /* ~17px — month caption. */

	/*
	 * Accent — the theme's own link/accent colour. Derives from the theme palette
	 * (primary → accent → link preset, whichever the theme defines), falling back
	 * to WordPress admin blue as a last resort. Never an invented brand colour.
	 */
	--vpress-accent: var( --wp--preset--color--primary,
		var( --wp--preset--color--accent,
		var( --wp--preset--color--link, #2271b1 ) ) );

	/* Focus ring — the derived accent, so focus reads as part of the identity. */
	--vpress-focus: var( --vpress-accent );

	/*
	 * State hues — semantic, tuned mid-tones (owned). The `-base` tokens hold the
	 * raw hues; the consumed tokens (no suffix) are those hues blended toward the
	 * local text colour in the color-mix block below, so a state signal stays
	 * legible on both light and dark themes (a colour tuned for a light surface is
	 * otherwise too dark on a dark one). Components consume ONLY the finished
	 * tokens — all derivation lives here, never in component rules. No theme
	 * derivation of the hue itself — a "full" shift means the same thing under
	 * every theme — but the blend keeps them theme-comfortable. The plain values
	 * here double as the fallback where color-mix is unavailable.
	 */
	--vpress-state-available-base: #1a7f37;
	--vpress-state-limited-base: #a15c00;
	--vpress-state-closed-base: #6c6c6c;
	--vpress-state-available: var( --vpress-state-available-base );
	--vpress-state-limited: var( --vpress-state-limited-base );
	--vpress-state-closed: var( --vpress-state-closed-base );

	/* Feedback colours, shared with the signup form (kept from the M-series CSS).
	   Same base/blend split as the state hues above. */
	--vpress-success-base: #1a7f37;
	--vpress-error-base: #b32d2e;
	--vpress-success: var( --vpress-success-base );
	--vpress-error: var( --vpress-error-base );
}

/*
 * Surface, border, and today-highlight tokens derive from the *local* text colour
 * via color-mix, so they adapt to light and dark themes automatically: a subtle
 * dark tint on a light theme, a subtle light tint on a dark one. They are declared
 * on every VolunteerPress element (matched by the shared `vpress-` class prefix)
 * so any front-end surface composes against them, not just the calendar; :where()
 * holds their specificity at zero so a theme can still override any of them.
 *
 * The plain grey fallbacks below apply where color-mix is unavailable — a neutral
 * mid-grey reads acceptably on both light and dark backgrounds.
 */
:where( [class*="vpress-"] ) {
	--vpress-border: rgba( 128, 128, 128, 0.28 );
	--vpress-border-strong: rgba( 128, 128, 128, 0.46 );
	--vpress-surface: rgba( 128, 128, 128, 0.06 );
	--vpress-surface-raised: rgba( 128, 128, 128, 0.1 );
	--vpress-today-bg: rgba( 128, 128, 128, 0.12 );

	/*
	 * Accent-derived roles (secondary-button text/border, hover tint) — the plain
	 * fallbacks where color-mix is unavailable: raw accent for text and borders, a
	 * neutral surface tint for the fill.
	 */
	--vpress-accent-text: var( --vpress-accent );
	--vpress-accent-border: var( --vpress-accent );
	--vpress-accent-border-strong: var( --vpress-accent );
	--vpress-accent-tint: rgba( 128, 128, 128, 0.06 );
}

@supports ( color: color-mix( in srgb, red, blue ) ) {
	:where( [class*="vpress-"] ) {
		--vpress-border: color-mix( in srgb, currentColor 16%, transparent );
		--vpress-border-strong: color-mix( in srgb, currentColor 30%, transparent );
		--vpress-surface: color-mix( in srgb, currentColor 4%, transparent );
		--vpress-surface-raised: color-mix( in srgb, currentColor 7%, transparent );
		--vpress-today-bg: color-mix( in srgb, var( --vpress-accent-text ) 10%, transparent );

		/*
		 * Dark-surface legibility law (see DESIGN.md §9): plugin semantic colours
		 * and accent derivations are always blended toward the local text colour,
		 * so they read on any host surface, light or dark. currentColor resolves at
		 * the consuming element, so each surface blends toward its own text colour.
		 * The percentages keep a recognisable hue while borrowing enough of the
		 * text colour to guarantee contrast against the surface the text sits on:
		 * each is verified to meet WCAG AA (4.5:1) on both a white surface with
		 * near-black text and a #1a1a1a surface with near-white text. The error
		 * red borrows the most (68%) — it is the darkest hue of the set against a
		 * dark surface.
		 */
		--vpress-state-available: color-mix( in srgb, var( --vpress-state-available-base ) 72%, currentColor );
		--vpress-state-limited: color-mix( in srgb, var( --vpress-state-limited-base ) 78%, currentColor );
		--vpress-state-closed: color-mix( in srgb, var( --vpress-state-closed-base ) 55%, currentColor );
		--vpress-success: color-mix( in srgb, var( --vpress-success-base ) 72%, currentColor );
		--vpress-error: color-mix( in srgb, var( --vpress-error-base ) 68%, currentColor );

		/*
		 * Accent text carries the same blend; the border and tint roles then derive
		 * from the blended text tone, so a secondary button's whole treatment stays
		 * perceptible wherever its label is.
		 */
		--vpress-accent-text: color-mix( in srgb, var( --vpress-accent ) 75%, currentColor );
		--vpress-accent-border: color-mix( in srgb, var( --vpress-accent-text ) 45%, transparent );
		--vpress-accent-border-strong: color-mix( in srgb, var( --vpress-accent-text ) 75%, transparent );
		--vpress-accent-tint: color-mix( in srgb, var( --vpress-accent-text ) 10%, transparent );
	}
}