/*
 * Athlete storefront design tokens.
 *
 * The single source of every colour, size, space, radius, layer and timing used by the
 * storefront. base.css and components.css reference these tokens; a raw value anywhere
 * else is a defect. Same visual language as the admin (control/assets/css/admin/tokens.css):
 * warm-grey "stone" neutrals, ink text, Athlete yellow for primary actions.
 *
 * Scales (Webwingz house standards):
 *   spacing  4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128
 *   type     12 · 13 · 14 · 16 · 18 · 21 · 24 · 32 · 40 · 56
 *   radius   4 (controls) · 8 (containers)
 *
 * Contrast ratios are WCAG 2.x, measured on white unless stated.
 * Light theme only for now; colours are role tokens so dark mode is a token swap.
 */

:root {
	/* ----- Warm-grey neutral ramp (stone), identical to the admin ----- */
	--st-gray-0: #ffffff;
	--st-gray-50: #fafaf9;
	--st-gray-100: #f5f5f4;
	--st-gray-200: #e7e5e4;
	--st-gray-300: #d6d3d1;
	--st-gray-400: #a8a29e;
	--st-gray-450: #948e89;  /* 3.24:1 - lightest grey that passes 3:1 for control borders */
	--st-gray-500: #78716c;  /* 4.8:1 */
	--st-gray-600: #57534e;  /* 7.6:1 */
	--st-gray-700: #44403c;
	--st-gray-800: #292524;
	--st-gray-900: #1c1917;  /* 17.5:1 */

	/* ----- Brand ----- */
	--st-yellow-50: #fff8db;
	--st-yellow-300: #ffe06b;
	--st-yellow-400: #ffce12; /* Athlete yellow */
	--st-yellow-500: #f0bf00;
	--st-yellow-600: #d1a400;

	/* ----- Text ----- */
	--st-ink: var(--st-gray-900);          /* headings, body, prices */
	--st-ink-muted: var(--st-gray-600);    /* 7.6:1 - secondary text (AAA) */
	--st-ink-subtle: var(--st-gray-500);   /* 4.8:1 - struck MRP, meta; white or gray-50 only */
	--st-ink-inverse: var(--st-gray-0);
	--st-ink-inverse-muted: var(--st-gray-300); /* 11.6:1 on gray-900 */
	--st-ink-disabled: var(--st-gray-400); /* disabled controls only (exempt from contrast) */

	/* ----- Surfaces ----- */
	--st-bg: var(--st-gray-0);             /* page: white, photography first */
	--st-surface: var(--st-gray-0);
	--st-surface-muted: var(--st-gray-100);/* image placeholders, chips, info panels */
	--st-surface-warm: var(--st-gray-50);  /* alternating page bands */
	--st-surface-hover: var(--st-gray-100);
	--st-surface-selected: var(--st-yellow-50);
	--st-surface-inverse: var(--st-gray-900); /* announcement bar, footer, brand strip */
	--st-surface-inverse-raised: var(--st-gray-800);

	/* ----- Borders (hairlines, no shadows) ----- */
	--st-border: var(--st-gray-200);
	--st-border-strong: var(--st-gray-300);
	--st-border-control: var(--st-gray-450); /* inputs, size pills, swatch rings (WCAG 1.4.11) */
	--st-border-inverse: #3a3532;

	/*
	 * ----- Primary accent: interactive only -----
	 * Yellow fills primary buttons (Add to cart, Shop now) and marks the selected state,
	 * always with ink text on it (11.7:1). Never yellow text or thin yellow lines on white
	 * (1.5:1). Links and the focus ring are ink on light surfaces, yellow on dark ones.
	 */
	--st-primary: var(--st-yellow-400);
	--st-primary-hover: var(--st-yellow-500);
	--st-primary-active: var(--st-yellow-600);
	--st-on-primary: var(--st-ink);
	--st-link: var(--st-ink);
	--st-link-hover: var(--st-gray-700);

	/* ----- Focus ----- */
	--st-focus-color: var(--st-ink);
	--st-focus-color-inverse: var(--st-yellow-400); /* 11.7:1 on gray-900 */
	--st-focus-halo: rgba(255, 206, 18, 0.55);      /* decorative brand halo */
	--st-focus-width: 2px;
	--st-focus-offset: 2px;

	/*
	 * ----- Semantic (separate from the brand accent) -----
	 *   success fg 7.1:1 on white, 6.5:1 on bg  (discount "% off", in stock)
	 *   warning fg 6.4:1 on bg (low stock, pre-order)
	 *   danger  fg 8.3:1 on white; solid 6.5:1 with white (Sale badge, errors)
	 *   info    fg 7.2:1 on bg
	 */
	--st-success-fg: #166534;
	--st-success-bg: #dcfce7;
	--st-success-border: #bbf7d0;
	--st-warning-fg: #9a3412;
	--st-warning-bg: #ffedd5;
	--st-warning-border: #fed7aa;
	--st-danger-fg: #991b1b;
	--st-danger-bg: #fee2e2;
	--st-danger-border: #fecaca;
	--st-danger-solid: #b91c1c;
	--st-info-fg: #1e40af;
	--st-info-bg: #dbeafe;
	--st-info-border: #bfdbfe;
	--st-neutral-fg: var(--st-gray-700);
	--st-neutral-bg: var(--st-gray-100);

	--st-rating: var(--st-ink); /* stars are ink: yellow stars on white fail 3:1 */

	/* ----- Typography ----- */
	--st-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

	--st-text-xs: 0.75rem;    /* 12 - badges, eyebrows (uppercase +0.08em) */
	--st-text-sm: 0.8125rem;  /* 13 - legal, meta */
	--st-text-ui: 0.875rem;   /* 14 - nav, buttons small, card meta */
	--st-text-base: 1rem;     /* 16 - storefront body (house standard) */
	--st-text-md: 1.125rem;   /* 18 - lead text, prices on cards at desktop */
	--st-text-lg: 1.3125rem;  /* 21 - h3, section intros */
	--st-text-xl: 1.5rem;     /* 24 - h2 on phones, product price */
	--st-text-2xl: 2rem;      /* 32 - h1 on phones, h2 on desktop */
	--st-text-3xl: 2.5rem;    /* 40 - h1 on desktop */
	--st-text-4xl: 3.5rem;    /* 56 - home hero on desktop */

	--st-leading-display: 1.05; /* 56 */
	--st-leading-tight: 1.15;   /* 32-40 */
	--st-leading-snug: 1.25;    /* 18-24 */
	--st-leading-ui: 1.4;
	--st-leading-body: 1.6;

	--st-tracking-tight: -0.02em;
	--st-tracking-caps: 0.08em;

	--st-weight-regular: 400;
	--st-weight-medium: 500;
	--st-weight-semibold: 600;
	--st-weight-bold: 700;

	/* ----- Spacing (8px base; 4 only for optical corrections) ----- */
	--st-space-1: 4px;
	--st-space-2: 8px;
	--st-space-3: 16px;
	--st-space-4: 24px;
	--st-space-5: 32px;
	--st-space-6: 48px;
	--st-space-7: 64px;
	--st-space-8: 96px;
	--st-space-9: 128px;

	--st-gutter: var(--st-space-5);    /* container side padding: 32 / 24 / 20 */
	--st-section: 120px;               /* house section rhythm: 120 desktop, 64 phone */
	--st-section-sm: var(--st-space-6);

	/* ----- Sizes ----- */
	--st-container: 1440px;
	--st-measure: 65ch;
	--st-control-height: 48px;         /* touch-friendly buttons, inputs, size pills */
	--st-control-height-sm: 40px;
	--st-icon: 24px;
	--st-icon-sm: 16px;
	--st-header-height: 64px;
	--st-swatch: 32px;

	/* ----- Radius ----- */
	--st-radius-sm: 4px;   /* controls, badges, chips */
	--st-radius-md: 8px;   /* cards, images, modals, panels */
	--st-radius-round: 50%;/* colour swatches and the cart count only */

	/* ----- Elevation ----- */
	--st-shadow-overlay: 0 8px 24px rgba(28, 25, 23, 0.12); /* menus, toasts, sticky bar */
	--st-backdrop: rgba(28, 25, 23, 0.56);

	/* ----- Layers ----- */
	--st-z-raised: 1;
	--st-z-sticky: 1020;
	--st-z-header: 1030;
	--st-z-dropdown: 1040;
	--st-z-overlay: 1050;
	--st-z-toast: 1090;

	/* ----- Motion (ease-out only) ----- */
	--st-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--st-duration-fast: 150ms;
	--st-duration-panel: 250ms;
}

@media (max-width: 1023.98px) {
	:root {
		--st-gutter: var(--st-space-4);
	}
}

@media (max-width: 767.98px) {
	:root {
		--st-section: var(--st-space-7);
		--st-header-height: 56px;
	}
}

@media (max-width: 479.98px) {
	:root {
		--st-gutter: 20px; /* house phone gutter: the one off-scale spacing value */
	}
}

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