/* =============================================================================
   GVS — circle colour swatches for WooCommerce variation attributes
   =============================================================================
   Paired with inc/swatches.php. Loaded only on single VARIABLE product pages.

   TOKEN CONTRACT
   --------------
   Every CHROME value (size, gap, border, focus ring, radius, selected state,
   text colour) resolves from the parent design system's aliases in
   arneiron/assets/css/ds.css section 1 — --c-* / --space-* / --r-*. Verified
   resolving on gvs.foundation 2026-08-12:
       --space-1 2px   --space-2 4px   --space-3 8px   --space-7 32px
       --r-sm 4px      --c-border #1B4A5A   --c-ink #1B4A5A   --c-accent #E8B33C
   The only literal is border-radius:50%, which is the geometric definition of
   "circle" and not a design value.

   The swatch FILL is NOT chrome — it is the attribute's own colour, injected
   per-term as --gvs-swatch-fill from `gvs_swatch_color` term meta. There is no
   colour map in this file, so adding a colour never requires a CSS change.

   ROLLBACK: delete this file and the matching wp_enqueue_style in
   inc/swatches.php; takes effect next request.
   ========================================================================== */

/* ---- 1. component tokens, mapped onto the design system -------------------- */
.gvs-swatches {
	--gvs-swatch-size:       var(--space-7);   /* 32px circle diameter          */
	--gvs-swatch-gap:        var(--space-3);   /* 8px between swatches          */
	--gvs-swatch-edge-w:     var(--space-1);   /* 2px ring around each circle   */
	--gvs-swatch-ring-off:   var(--space-2);   /* 4px focus-ring offset         */
	--gvs-swatch-pad:        var(--space-2);   /* 4px chip padding (no-fill)    */

	--gvs-swatch-edge:       var(--c-border);
	--gvs-swatch-edge-on:    var(--c-ink);
	--gvs-swatch-ring:       var(--c-accent);
	--gvs-swatch-ink:        var(--c-ink);
	--gvs-swatch-chip-bg:    var(--c-surface);
	--gvs-swatch-chip-r:     var(--r-sm);

	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0; /* fieldset default would force a min content width */
}

/* ---- 2. progressive enhancement ------------------------------------------- *
 * No JS  -> native <select> visible, swatches hidden (still fully usable).
 * JS on  -> swatches visible, native <select> hidden but still the value
 *           carrier WooCommerce reads and writes.
 * ------------------------------------------------------------------------- */
.gvs-swatches { display: none; }
.gvs-swatches-js .gvs-swatches { display: block; }
.gvs-swatches-js .gvs-swatches__native { display: none; }

.gvs-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gvs-swatch-gap);
	align-items: center;
}

.gvs-swatch { display: inline-flex; }

/* ---- 3. the control ------------------------------------------------------- *
 * The radio itself is visually hidden but NOT display:none — it must stay
 * focusable and in the accessibility tree so the group keeps native keyboard
 * behaviour (arrow keys) and screen-reader announcement.
 * ------------------------------------------------------------------------- */
.gvs-swatch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gvs-swatch__label {
	display: inline-flex;
	align-items: center;
	gap: var(--gvs-swatch-pad);
	cursor: pointer;
	color: var(--gvs-swatch-ink);
	line-height: 1;
}

.gvs-swatch__dot {
	inline-size: var(--gvs-swatch-size);
	block-size: var(--gvs-swatch-size);
	border-radius: 50%; /* geometric: this is what makes it a circle */
	background: var(--gvs-swatch-fill, transparent);
	box-shadow: inset 0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-edge);
	flex: 0 0 auto;
}

/* Colour name: hidden while a fill is showing, but always in the a11y tree. */
.gvs-swatch__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- 4. states ------------------------------------------------------------ */

/* Selected: thicker ink ring + accent halo. Two signals, not colour alone. */
.gvs-swatch__input:checked + .gvs-swatch__label .gvs-swatch__dot {
	box-shadow:
		inset 0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-edge-on),
		0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-ring);
}

/* Keyboard focus: visible ring, offset so it clears the swatch edge. */
.gvs-swatch__input:focus-visible + .gvs-swatch__label .gvs-swatch__dot {
	outline: var(--gvs-swatch-edge-w) solid var(--gvs-swatch-ring);
	outline-offset: var(--gvs-swatch-ring-off);
}

.gvs-swatch__label:hover .gvs-swatch__dot {
	box-shadow: inset 0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-edge-on);
}

/* Unavailable for the current size selection — WooCommerce removes the option
   from the <select>; gvs-swatches.js mirrors that onto the radio. */
.gvs-swatch__input:disabled + .gvs-swatch__label {
	cursor: not-allowed;
	opacity: 0.35;
}
.gvs-swatch__input:disabled + .gvs-swatch__label .gvs-swatch__dot {
	box-shadow: inset 0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-edge);
}

/* ---- 5. FAILURE BRANCH: a term with no configured fill -------------------- *
 * Painting an empty circle would give a control that is invisible against the
 * page and indistinguishable from its neighbours. Instead the swatch degrades
 * to a labelled chip: the colour NAME becomes visible text and the circle
 * becomes a dashed outline, so the option is still readable and clickable.
 * ------------------------------------------------------------------------- */
.gvs-swatch--nofill .gvs-swatch__label {
	padding: var(--gvs-swatch-pad) var(--gvs-swatch-gap);
	border: var(--gvs-swatch-edge-w) solid var(--gvs-swatch-edge);
	border-radius: var(--gvs-swatch-chip-r);
	background: var(--gvs-swatch-chip-bg);
}
.gvs-swatch--nofill .gvs-swatch__dot {
	background: transparent;
	box-shadow: none;
	border: var(--gvs-swatch-edge-w) dashed var(--gvs-swatch-edge);
	inline-size: calc(var(--gvs-swatch-size) / 2);
	block-size: calc(var(--gvs-swatch-size) / 2);
}
/* The name is REAL VISIBLE TEXT in this state — this is the whole point. */
.gvs-swatch--nofill .gvs-swatch__name {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}
.gvs-swatch--nofill .gvs-swatch__input:checked + .gvs-swatch__label {
	border-color: var(--gvs-swatch-edge-on);
	box-shadow: 0 0 0 var(--gvs-swatch-edge-w) var(--gvs-swatch-ring);
}

/* ---- 6. reduced motion / forced colours ----------------------------------- */
@media (forced-colors: active) {
	.gvs-swatch__dot { forced-color-adjust: none; border: 1px solid CanvasText; }
	.gvs-swatch__input:checked + .gvs-swatch__label .gvs-swatch__dot { outline: 2px solid Highlight; }
}