/*
 * Design tokens: Bog Core Collection (final XD design, 2026-10-01).
 *
 * Components reference semantic tokens (--color-text, --color-action...),
 * never the raw palette, and never hard-code a size the design repeats.
 * The typeface lives in fonts.css (--font-family-base) so the licensed
 * Rauschen B webfont is a one-file swap.
 *
 * Design facts encoded here: one red (#B11F24) for ALL text, buttons, radios
 * and icons on white; 1px #E4E4E4 lines; full pills for every control; square
 * cards, modal and panels; 20px / 10px image radii; NO shadows; no
 * letter-spacing; mostly uppercase copy.
 *
 * Breakpoints (CSS custom properties cannot be used in media queries):
 *   mobile  < 768px   (XD reference 375)
 *   tablet  768–1099  (2 columns, interpolated)
 *   desktop >= 1100px (XD reference 1920)
 */

:root {
	/* ---- Palette (the entire XD vector palette) ----------------------- */
	--bog-red: #b11f24;
	--bog-red-deep: #8e181c; /* hover/active only: derived, not in the XD */
	--white: #ffffff;
	--line: #e4e4e4;
	--grey-scrim: #7b7b7b;
	--grey-handle: #cccccc;
	--grey-surface: #f0f0f0;

	/* ---- Semantic colors ----------------------------------------------- */
	--color-bg: var(--white);
	--color-surface: var(--white);
	--color-surface-muted: var(--grey-surface);
	--color-placeholder: var(--grey-surface);
	--color-text: var(--bog-red);
	--color-text-inverse: var(--white);
	--color-border: var(--line);
	--color-border-strong: var(--bog-red);

	--color-action: var(--bog-red);
	--color-action-hover: var(--bog-red-deep);
	--color-action-text: var(--white);
	--color-disabled-bg: var(--grey-surface);
	--color-disabled-border: var(--line);
	--color-disabled-text: var(--grey-scrim);

	--color-focus: var(--bog-red);
	--color-backdrop: rgb(123 123 123 / 0.67); /* #7B7B7B @ 67% */
	--color-handle: var(--grey-handle);
	--color-summary-bar: var(--grey-surface); /* mobile checkout order summary */
	--color-checkout-bar: var(--bog-red);

	--color-notice-bg: var(--white);
	--color-notice-border: var(--line);
	--color-notice-accent: var(--bog-red);

	/* ---- Typography ---------------------------------------------------- */
	--font-body: var(--font-family-base);
	--font-display: var(--font-family-base);

	--weight-book: 400;
	--weight-bold: 700;

	/* The XD sizes, in px steps (1rem = 16px). */
	--text-10: 0.625rem;
	--text-12: 0.75rem;
	--text-13: 0.8125rem;
	--text-14: 0.875rem;
	--text-16: 1rem;
	--text-18: 1.125rem;
	--text-20: 1.25rem;
	--text-24: 1.5rem;

	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-body: 1.4;

	/* ---- Spacing (4px base) ------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* ---- Layout -------------------------------------------------------- */
	--gutter: 19px; /* mobile side gutter (XD 375: 19px) */
	--grid-gap: 19px; /* gap between cards in a row */
	--grid-row-gap: 30px; /* gap between stacked cards */
	--section-gap: 30px; /* card rows <-> lifestyle image */
	--content-max: 1745px; /* 4 x 422 + 3 x 19 */
	--card-max: 422px;
	--page-max: 1200px; /* content pages and checkout */

	/* ---- Shape --------------------------------------------------------- */
	--radius-none: 0;
	--radius-pill: 9999px;
	--radius-image: 20px; /* quick-add modal image */
	--radius-thumb: 10px; /* sheet, cart and checkout thumbnails */
	--border-width: 1px;
	--icon-stroke: 3px; /* the XD close X */

	/* ---- Control sizes -------------------------------------------------- */
	--control-height: 40px; /* card button, cart pill, mobile CTAs */
	--control-height-lg: 56px; /* modal CTA, drawer checkout */
	--input-height: 47px; /* checkout inputs and radio rows */
	--chip-size: 41px;
	--stepper-height: 41px;
	--stepper-width: 121px;
	--icon-size: 1.5rem;

	/* ---- Overlays -------------------------------------------------------- */
	--modal-width: 603px;
	--modal-pad-x: 41px;
	--modal-pad-y: 38px;
	--drawer-width: 517px;
	--drawer-pad: 28px;
	--thumb-size: 112px;

	/* ---- Layers -------------------------------------------------------- */
	--z-cart-pill: 20;
	--z-overlay: 100;

	/* ---- Motion -------------------------------------------------------- */
	--duration-fast: 120ms;
	--duration-base: 240ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		/* 88px at 1920, scaling down with the viewport. */
		--gutter: clamp(19px, 4.5834vw, 88px);
		--section-gap: 33px;
		--chip-size: 57px;
		--stepper-height: 56px;
		--stepper-width: 143px;
		--thumb-size: 122px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
	}
}