/*
 * kl-commerce/assets/css/tokens.css
 *
 * The ONLY file in the theme permitted to contain literal design values.
 * These are defaults. KL Style Studio overrides any of them with an inline
 * :root block enqueued immediately after this file.
 *
 * If you find a hex code, font name, or px size in any other theme or
 * plugin CSS file, that is a bug — it breaks one-click re-theming.
 */

:root {

	/* ---- Color ------------------------------------------------------ */
	--klc-color-bg: #ffffff;
	--klc-color-text: #000000;
	--klc-color-muted: #6b6b6b;
	--klc-color-accent: #000000;
	--klc-color-border: #e5e5e5;
	--klc-color-surface: #f7f7f7;

	/* ---- Font families ---------------------------------------------- */
	/* System stack until Style Studio selects from the bundled registry. */
	--klc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--klc-font-heading: var(--klc-font-body);
	--klc-font-nav: var(--klc-font-body);
	--klc-font-button: var(--klc-font-body);
	--klc-font-price: var(--klc-font-body);

	/* ---- Font weight / leading / tracking --------------------------- */
	--klc-weight-body: 400;
	--klc-weight-heading: 600;
	--klc-weight-nav: 500;
	--klc-weight-button: 500;
	--klc-weight-price: 500;

	--klc-leading-heading: 1.15;
	--klc-leading-body: 1.6;
	--klc-leading-tight: 1.25;

	--klc-tracking-heading: -0.015em;
	--klc-tracking-nav: 0.02em;
	--klc-tracking-button: 0.04em;

	/* ---- Type scale (desktop maxima, 1.25 ratio) -------------------- */
	--klc-size-base: 1rem;
	--klc-size-h1: 3.052rem;
	--klc-size-h2: 2.441rem;
	--klc-size-h3: 1.953rem;
	--klc-size-h4: 1.563rem;
	--klc-size-h5: 1.25rem;
	--klc-size-h6: 1rem;
	--klc-size-sm: 0.875rem;
	--klc-size-xs: 0.75rem;

	/*
	 * Fluid scaling. Rendered size = min(size * floor + fluid, size).
	 * floor 1 + fluid 0 = no scaling (h5, h6 are static by design —
	 * they sit near body size and shrinking them hurts legibility).
	 * Theme-internal. Style Studio does not need to expose these.
	 */
	--klc-fs-floor-h1: 0.60;
	--klc-fs-fluid-h1: 2.2vw;
	--klc-fs-floor-h2: 0.65;
	--klc-fs-fluid-h2: 1.5vw;
	--klc-fs-floor-h3: 0.72;
	--klc-fs-fluid-h3: 1vw;
	--klc-fs-floor-h4: 0.80;
	--klc-fs-fluid-h4: 0.6vw;

	/* ---- Spacing ---------------------------------------------------- */
	--klc-space-3xs: 0.25rem;
	--klc-space-2xs: 0.5rem;
	--klc-space-xs: 0.75rem;
	--klc-space-sm: 1rem;
	--klc-space-md: 1.5rem;
	--klc-space-lg: 2.5rem;
	--klc-space-xl: 4rem;
	--klc-space-2xl: 6rem;
	--klc-space-3xl: 9rem;

	/* Page gutter — fluid, so it is not a fixed step. */
	--klc-gutter: clamp(1rem, 4vw, 2.5rem);

	/* ---- Radius ----------------------------------------------------- */
	--klc-radius-none: 0;
	--klc-radius-sm: 2px;
	--klc-radius-md: 4px;
	--klc-radius-lg: 8px;
	--klc-radius-pill: 999px;

	/* ---- Max widths ------------------------------------------------- */
	--klc-maxw-text: 68ch;
	--klc-maxw-narrow: 48rem;
	--klc-maxw-content: 75rem;
	--klc-maxw-wide: 90rem;
	--klc-maxw-full: 100%;

	/* ---- Borders and focus ring ------------------------------------- */
	--klc-border-width: 1px;
	--klc-ring-width: 2px;
	--klc-ring-offset: 2px;

	/* ---- Motion ----------------------------------------------------- */
	--klc-duration-fast: 150ms;
	--klc-duration-base: 250ms;
	--klc-duration-slow: 400ms;
	--klc-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- Stacking --------------------------------------------------- */
	--klc-z-header: 100;
	--klc-z-overlay: 200;
	--klc-z-modal: 300;
}

/*
 * Breakpoints are deliberately NOT tokens. CSS custom properties cannot be
 * used inside @media conditions. Target widths for this project:
 * 380 / 768 / 1024 / 1440.
 */