/*
 * Krugio Theme: neutral default design tokens (Base).
 * A design child overrides any subset in its own assets/css/tokens.css.
 * Components read these variables only; no literal colours, fonts, spacing or radii elsewhere.
 * Contrast (WCAG 2.x): text on bg 17.4:1, text-muted on bg 7.0:1, on-primary on primary 17.4:1,
 * on-sale on sale 6.5:1, error/success on bg 6.5:1/6.3:1, border on bg 3.5:1.
 * border-subtle and field-bg (defaults) have the same contrast as border and bg; a design that lightens
 * border-subtle keeps --krugio-color-border for interactive controls (the 3:1 non-text rule applies to those).
 *
 * Additive tokens (token contract stays API 1):
 * --krugio-color-border-subtle  separators and outlines of non-interactive containers (default: color-border).
 * --krugio-color-field-bg       background of input, select, textarea, select2, pagination items, swatches (default: color-bg).
 * --krugio-grid-gap-row         row gap of the product grid; column gap stays --krugio-grid-gap (default: grid-gap).
 * --krugio-radius               master corner radius. Sharp = 0, soft = 0.5rem.
 * --krugio-radius-control       small interactive things: buttons, pagination items, badges, count bubbles, chips,
 *                               swatches, quantity field, search field and button. Pill buttons and round pagination: 999px.
 * --krugio-radius-box           areas: cards, images, inputs, select2, notices, payment and terms boxes.
 *                               min() keeps boxes sane if the master is set to 999px.
 * radius-button and radius-badge follow radius-control; radius-card and radius-input follow radius-box;
 * pagination-radius follows radius-button. Each can still be overridden alone.
 */

:root {
	/* Colour */
	--krugio-color-bg: #fff;
	--krugio-color-surface: #f5f5f3;
	--krugio-color-text: #1a1a1a;
	--krugio-color-text-muted: #595959;
	--krugio-color-primary: #1a1a1a;
	--krugio-color-on-primary: #fff;
	--krugio-color-accent: #8a4b00;
	--krugio-color-border: #8a8a8a;
	--krugio-color-border-subtle: var(--krugio-color-border);
	--krugio-color-field-bg: var(--krugio-color-bg);
	--krugio-color-sale: #b3261e;
	--krugio-color-on-sale: #fff;
	--krugio-color-success: #1b6e3a;
	--krugio-color-error: #b3261e;

	/* Typography */
	--krugio-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--krugio-font-heading: var(--krugio-font-body);
	--krugio-font-size-base: 1rem;
	--krugio-font-size-sm: 0.875rem;
	--krugio-font-size-lg: 1.125rem;
	--krugio-font-size-xl: 1.5rem;
	--krugio-font-size-2xl: 2rem;
	--krugio-line-height-base: 1.6;
	--krugio-line-height-heading: 1.25;
	--krugio-weight-body: 400;
	--krugio-weight-heading: 600;
	--krugio-heading-transform: none;
	--krugio-page-title-size: var(--krugio-font-size-2xl); /* the h1 of every kind of page: text pages, cart, checkout, account, contact, archives, search, 404 */
	--krugio-page-title-weight: var(--krugio-weight-heading);
	--krugio-page-title-color: var(--krugio-color-text);
	--krugio-page-title-space-before: 0;

	/* Spacing (modular scale) */
	--krugio-space-1: 0.25rem;
	--krugio-space-2: 0.5rem;
	--krugio-space-3: 0.75rem;
	--krugio-space-4: 1rem;
	--krugio-space-5: 1.5rem;
	--krugio-space-6: 2rem;
	--krugio-space-7: 3rem;
	--krugio-space-8: 4.5rem;

	/* Shape */
	--krugio-radius: 0.25rem;
	--krugio-radius-control: var(--krugio-radius);
	--krugio-radius-box: min(var(--krugio-radius), 1.5rem);
	--krugio-radius-button: var(--krugio-radius-control);
	--krugio-radius-card: var(--krugio-radius-box);
	--krugio-radius-input: var(--krugio-radius-box);
	--krugio-radius-badge: var(--krugio-radius-control);
	--krugio-border-width: 1px;
	--krugio-icon-stroke: 2; /* line weight of every inline icon (unitless, Lucide default 2) */

	/* Buttons */
	--krugio-button-padding-y: 0.75rem;
	--krugio-button-padding-x: 1.5rem;
	--krugio-button-weight: 600;
	--krugio-button-transform: none;

	/* Layout */
	--krugio-content-width: 75rem;
	--krugio-gutter: 1rem;
	--krugio-columns-desktop: 4;
	--krugio-columns-tablet: 3;
	--krugio-columns-mobile: 2;
	--krugio-grid-gap: 1rem;
	--krugio-grid-gap-row: var(--krugio-grid-gap);
	--krugio-header-height: 4rem;
	--krugio-drawer-width: min(26rem, 100%);
	--krugio-drawer-thumb-width: 4.5rem;
	--krugio-drawer-qty-size: 2rem; /* +/- button size in the drawer: at least 24 CSS px (WCAG 2.2 AA 2.5.8) */

	/* Media */
	--krugio-image-ratio: 3 / 4;
	--krugio-card-title-lines: 2;

	/* Badge */
	--krugio-badge-top: 0.5rem;
	--krugio-badge-left: 0.5rem;
	--krugio-badge-size: 0.875rem;

	/* Pagination */
	--krugio-pagination-radius: var(--krugio-radius-button);

	/* Motion */
	--krugio-transition: 0.2s ease;
	--krugio-slide-duration: 0.28s;        /* sticky add-to-cart bar slide in / out (KRG-104); 0s with reduced motion */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--krugio-transition: 0s;
		--krugio-slide-duration: 0s;
	}
}