/**
 * Atomic Addons — WooCommerce frontend design tokens.
 *
 * One vocabulary for every WooCommerce extension's storefront CSS, so a
 * wishlist button, a quick-view modal and a compare table read as parts of the
 * same product rather than three plugins stacked together.
 *
 * Before this file the extensions between them used 33 border radii, 29 font
 * sizes and 131 colours drawn from four unrelated grey scales — plus the
 * WordPress admin blue, on the storefront. The values below are the ones the
 * better-behaved components had already converged on (a zinc neutral ramp with
 * near-black actions); everything else is normalised onto them.
 *
 * Every token is a plain custom property, so a theme can override any of them
 * from its own `:root` without touching this plugin.
 */

:root {
	/* --- Neutrals ------------------------------------------------------
	   One ramp. Surfaces at the light end, text at the dark end, borders in
	   the middle. Nothing in the extensions should introduce a second grey. */
	--aea-wc-surface: #fff;
	--aea-wc-surface-subtle: #fafafa;
	--aea-wc-surface-muted: #f4f4f5;
	--aea-wc-surface-sunken: #efeff1;

	--aea-wc-border: #e4e4e7;
	--aea-wc-border-strong: #d4d4d8;

	--aea-wc-text: #18181b;
	--aea-wc-text-soft: #3f3f46;
	--aea-wc-text-muted: #52525b;
	--aea-wc-text-subtle: #71717a;
	--aea-wc-text-faint: #a1a1aa;

	/* --- Action ---------------------------------------------------------
	   Deliberately a neutral near-black rather than a brand hue: these
	   controls sit inside someone else's theme, and a dark neutral reads as
	   deliberate next to any accent the theme already uses. Override
	   --aea-wc-accent to tie them to a brand colour. */
	--aea-wc-accent: #18181b;
	--aea-wc-accent-hover: #27272a;
	--aea-wc-accent-contrast: #fff;

	/* --- Status ---------------------------------------------------------
	   Used for meaning only — stock, errors, savings — never decoration. */
	--aea-wc-danger: #dc2626;
	--aea-wc-danger-surface: #fef2f2;
	--aea-wc-danger-border: #fecaca;
	--aea-wc-success: #15803d;
	--aea-wc-success-surface: #f0fdf4;
	--aea-wc-success-border: #bbf7d0;
	--aea-wc-warning: #b45309;
	--aea-wc-warning-surface: #fffbeb;
	--aea-wc-warning-border: #fde68a;

	/* --- Spacing --------------------------------------------------------
	   A 4px scale. Component CSS should reach for a step, not invent 13px. */
	--aea-wc-space-1: 4px;
	--aea-wc-space-2: 8px;
	--aea-wc-space-3: 12px;
	--aea-wc-space-4: 16px;
	--aea-wc-space-5: 20px;
	--aea-wc-space-6: 24px;
	--aea-wc-space-8: 32px;
	--aea-wc-space-10: 40px;

	/* --- Radius ---------------------------------------------------------
	   Tight on purpose. Rounding is a quiet signal that something is a
	   surface — a control, a panel — not decoration, so the steps stay small
	   enough to read as crisp rather than soft. `lg` is the ceiling and is for
	   panels and modals only; `pill` is for dots, chips and round buttons.

	   Radius is also not applied everywhere: an element with no background,
	   border or clipping gains nothing from it, and it does not render at all
	   on table rows and cells. */
	--aea-wc-radius-sm: 2px;
	--aea-wc-radius-md: 4px;
	--aea-wc-radius-lg: 8px;
	--aea-wc-radius-pill: 999px;

	/* --- Type -----------------------------------------------------------
	   Inherits the theme's family; only size, weight and rhythm are fixed so
	   the components sit inside the theme's voice instead of fighting it. */
	--aea-wc-text-xs: 11px;
	--aea-wc-text-sm: 12px;
	--aea-wc-text-base: 13px;
	--aea-wc-text-md: 14px;
	--aea-wc-text-lg: 16px;
	--aea-wc-text-xl: 20px;

	--aea-wc-leading-tight: 1.3;
	--aea-wc-leading: 1.5;

	--aea-wc-weight-normal: 400;
	--aea-wc-weight-medium: 500;
	--aea-wc-weight-semibold: 600;

	/* --- Elevation ------------------------------------------------------
	   Three steps, all restrained. Depth is for things that genuinely float
	   above the page: a dropdown, a modal, a fixed bar. Cards use a border. */
	--aea-wc-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
	--aea-wc-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);
	--aea-wc-shadow-lg: 0 16px 40px rgba(24, 24, 27, 0.14);

	/* Keyboard focus. One ring everywhere, so focus is never ambiguous. */
	--aea-wc-focus-ring: 0 0 0 3px rgba(24, 24, 27, 0.14);

	/* --- Controls -------------------------------------------------------
	   A single height for inputs, selects and buttons so a row of mixed
	   controls lines up on the same baseline without per-component nudging. */
	--aea-wc-control-height: 40px;
	--aea-wc-control-height-sm: 32px;
	/* Primary calls to action are deliberately taller than the controls around
	   them — one step up, not an arbitrary per-component size. */
	--aea-wc-control-height-lg: 48px;
	--aea-wc-control-padding-x: 14px;

	/* --- Motion ---------------------------------------------------------
	   Short and uniform. Anything longer reads as lag on a storefront. */
	--aea-wc-transition: 160ms ease;
	--aea-wc-transition-slow: 240ms ease;

	/* Product imagery. One ratio across grids, carousels, compare and
	   quick-view, so cards never jump height between components. */
	--aea-wc-media-ratio: 1 / 1;
}

/* Respect a reader who has asked for less movement. Declared once here rather
   than repeated in every component stylesheet. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--aea-wc-transition: 0ms;
		--aea-wc-transition-slow: 0ms;
	}
}