/**
 * Out-N-Out Skincare — Global Design Tokens
 * -----------------------------------------------------------------------------
 * Single source of truth for the design system. Every value here is VERIFIED
 * from the reverse-engineering of the live Shopify site (Minimog v5.6.0), or is
 * a neutral structural default. Do NOT invent unverified type scales or fixed
 * header heights — those are marked and left open until measured.
 *
 * Naming: all custom properties are prefixed --oon- to avoid collisions with
 * Elementor, WooCommerce, or plugin variables.
 */

:root {
	/* ---- Brand colors (verified) ------------------------------------------ */
	--oon-color-bg: #ffffff;               /* --color-background 255,255,255 */
	--oon-color-bg-secondary: #f5f5f5;     /* secondary surface */
	--oon-color-text: #212121;             /* --color-foreground 33,33,33 */
	--oon-color-text-secondary: #666666;   /* --color-foreground-secondary */
	--oon-color-heading: #332d55;          /* --color-heading 51,45,85 */
	--oon-color-accent: #9a84c8;           /* accent scheme bg 154,132,200 */
	--oon-color-border: #eeeeee;           /* --color-border 238,238,238 */
	--oon-color-price-sale: #e84e4e;       /* --color-price-sale 232,78,78 */
	--oon-color-form-field: #f2f2f2;       /* --color-form-field 242,242,242 */
	--oon-color-announce: #dbb883;         /* announcement bar beige/gold (live --gradient-background) */

	/* Buttons (verified: button bg = heading indigo) */
	--oon-color-btn: #332d55;
	--oon-color-btn-text: #ffffff;
	--oon-color-btn-outline: #000000;

	/* RGB channels for alpha compositing (rgba(var(--x-rgb), .5)) */
	--oon-color-heading-rgb: 51, 45, 85;
	--oon-color-accent-rgb: 154, 132, 200;
	--oon-color-text-rgb: 33, 33, 33;

	/* ---- Typography (families/weights verified; sizes are neutral) -------- */
	/* Heading: Butler 500. Body/UI: Jost 400/500/700. Fallbacks are silent-
	   safe system stacks used ONLY until licensed font files are supplied. */
	--oon-font-heading: "Butler", Georgia, "Times New Roman", serif;
	--oon-font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--oon-fw-heading: 500;
	--oon-fw-regular: 400;
	--oon-fw-medium: 500;
	--oon-fw-bold: 700;

	--oon-heading-letter-spacing: 0px;     /* --heading-letter-spacing: 0px */
	--oon-body-line-height: 1.6;           /* neutral, refine when measured */
	--oon-heading-line-height: 1.2;        /* neutral, refine when measured */

	/* Base font size is a neutral structural default (UNVERIFIED exact px). */
	--oon-font-size-base: 16px;

	/* ---- Layout (verified) ------------------------------------------------ */
	--oon-container-width: 1170px;         /* --container-width */
	--oon-container-padding: 15px;         /* structural gutter */
	--oon-column-gap: 30px;                /* desktop --column-gap */
	--oon-column-gap-mobile: 16px;         /* mobile column gap */

	/* ---- Buttons / radii (verified) --------------------------------------- */
	--oon-btn-radius: 78px;                /* --btn-border-radius */
	--oon-btn-border-width: 1px;           /* --btn-border-width */
	--oon-btn-line-height: 26px;           /* --btn-line-height */
	--oon-radius-full: 9999px;             /* --rounded-full / badges */
	--oon-radius-sm: 4px;                  /* neutral small radius */

	/* ---- Motion (verified) ------------------------------------------------ */
	--oon-transition: 0.25s ease;          /* --m-duration-default .25s ease */
	--oon-duration: 0.25s;

	/* ---- Z-index scale (structural) --------------------------------------- */
	--oon-z-header: 100;
	--oon-z-drawer: 200;
	--oon-z-overlay: 300;
	--oon-z-modal: 400;
}

/**
 * Breakpoint reference (verified: 480, 640, 768, 1024, 1280, 1536).
 * CSS custom properties cannot be used inside @media queries, so these live
 * here as documentation and are mirrored by SCSS-style constants in base.css.
 *
 *   --oon-bp-xs: 480px;
 *   --oon-bp-sm: 640px;
 *   --oon-bp-md: 768px;
 *   --oon-bp-lg: 1024px;
 *   --oon-bp-xl: 1280px;
 *   --oon-bp-2xl: 1536px;
 */