/**
 * Haat — design tokens.
 *
 * Single source of truth for every colour, radius, shadow, font and measure in
 * the theme. To re-skin the whole store, edit only this file. Nothing else in
 * assets/css hard-codes a colour.
 *
 * HOW CUSTOMIZER OVERRIDES WORK
 * The saturated brand shades resolve through a --haat-brand-* variable with the
 * preset literal as the fallback:
 *
 *     --haat-flame-500: var( --haat-brand-accent, #ff4a1c );
 *
 * inc/customizer/output.php prints ":root { --haat-brand-accent: <hex>; }" only
 * when the merchant has actually picked a colour. So an unconfigured store
 * renders the preset byte-for-byte, and picking one Primary colour repaints
 * every button, badge, CTA, price, focus ring and nav pill at once, rather than
 * the handful of elements a normal theme's "primary colour" reaches.
 *
 * Light TINTS (50-300) and deep SHADES (800-900) stay fixed on purpose. If they
 * followed the brand colour too, every soft tinted panel would collapse into a
 * solid block of brand, and the tint/shade pairs components rely on for
 * contrast (a flame-50 plate under flame-700 ink) would stop being legible.
 *
 * @package Haat
 */

:root {
	color-scheme: light;

	/* ── Brand ramps ──────────────────────────────────────────────────────
	 * flame    — the marketplace fire: buttons, sale badges, CTAs, prices
	 * midnight — the neutral ink ramp: text, dark chrome, borders
	 * saffron  — the secondary accent: ratings, deal timers, highlights
	 */
	--haat-flame-50: #fff5f0;
	--haat-flame-100: #ffe3d4;
	--haat-flame-200: #ffc09e;
	--haat-flame-300: #ff9866;
	--haat-flame-400: var( --haat-brand-accent, #ff7440 );
	--haat-flame-500: var( --haat-brand-accent, #ff4a1c );
	--haat-flame-600: var( --haat-brand-accent, #e23811 );
	--haat-flame-700: var( --haat-brand-accent, #b62a0c );
	--haat-flame-800: #841d08;
	--haat-flame-900: #5a1306;

	--haat-midnight-50: #f4f6fb;
	--haat-midnight-100: #e6ebf5;
	--haat-midnight-200: #c4cee2;
	--haat-midnight-300: #97a5c5;
	--haat-midnight-400: #6677a3;
	--haat-midnight-500: #46557f;
	--haat-midnight-600: #2f3d65;
	--haat-midnight-700: #1f2a4a;
	--haat-midnight-800: #131a31;
	--haat-midnight-900: #0a0e27;

	--haat-saffron-50: #fff8e5;
	--haat-saffron-100: #ffe9b0;
	--haat-saffron-200: #ffd672;
	--haat-saffron-300: #ffc23a;
	--haat-saffron-400: var( --haat-brand-accent-2, #fcb015 );
	--haat-saffron-500: var( --haat-brand-accent-2, #e69100 );
	--haat-saffron-600: var( --haat-brand-accent-2, #b97600 );
	--haat-saffron-700: var( --haat-brand-accent-2, #875400 );
	--haat-saffron-800: #5b3900;
	--haat-saffron-900: #3a2400;

	--haat-cream: #faf8f4;
	--haat-paper: #fffdfa;

	/* ── Semantic roles ───────────────────────────────────────────────────
	 * Components paint with THESE, not with ramp steps, so a re-skin or a
	 * dark-mode flip only has to move the roles.
	 */
	--haat-background: var( --haat-brand-background, #fbfaf7 );
	--haat-foreground: var( --haat-brand-text, #0a0e27 );
	--haat-surface: var( --haat-brand-surface, #ffffff );
	--haat-surface-foreground: var( --haat-brand-text, #0a0e27 );
	--haat-primary: var( --haat-brand-accent, #ff4a1c );
	--haat-primary-foreground: var( --haat-brand-on-accent, #ffffff );

	/* Dark chrome — the top bar and the footer. Reads as "inverse surface":
	 * the text colour becomes the ground and the page background becomes the
	 * ink, so a merchant who repaints text/background gets a coherent inverse
	 * for free instead of a navy bar stranded against their new palette. */
	--haat-secondary: var( --haat-brand-text, #131a31 );
	--haat-secondary-foreground: var( --haat-brand-background, #ffffff );

	--haat-muted: #f2efe9;
	--haat-muted-foreground: var( --haat-brand-muted, #4a5270 );
	--haat-accent: var( --haat-brand-accent-2, #fcb015 );
	--haat-accent-foreground: #0a0e27;
	--haat-destructive: #ef4444;
	--haat-destructive-foreground: #ffffff;
	--haat-success: #16a34a;
	--haat-success-foreground: #ffffff;
	--haat-border: var( --haat-brand-border, #e8e2d8 );
	--haat-input: var( --haat-brand-border, #e8e2d8 );
	--haat-ring: var( --haat-brand-accent, #ff4a1c );

	/* ── Layout ───────────────────────────────────────────────────────────
	 * Every container in the theme is .haat-container, which resolves its
	 * measure through this one token — so Customizer → Layout → Page width
	 * moves the whole store from a single place. 80rem IS the 1280px the
	 * preset ships, so an unconfigured store is unchanged. */
	--haat-page-width: var( --haat-layout-page-width, 80rem );
	--haat-gutter: clamp( 1rem, 0.5rem + 2vw, 2rem );
	--haat-header-height: 4.5rem;
	/* Logo height. 36px in a 72px bar leaves the wordmark reading as one item
	 * among the header controls rather than looming over them; 48px filled two
	 * thirds of the bar and made everything beside it look secondary. */
	--haat-logo-height: 2.25rem;

	/* ── WooCommerce's own custom properties ──────────────────────────
	 *
	 * WooCommerce styles its own form fields with
	 * `.woocommerce form .form-row .input-text` (0-3-1) reading
	 * `var( --wc-form-border-color )`, which beats the theme's
	 * `input[type="text"]` (0-1-1). Re-declaring the border on every WooCommerce
	 * input at ever-higher specificity is a losing game -- these variables are
	 * the extension point WooCommerce actually provides, so pointing them at
	 * the theme's tokens fixes the CLASSIC forms -- account, cart, classic
	 * checkout, addresses -- in one place, and keeps following a merchant's
	 * palette.
	 *
	 * It does NOT reach the block checkout: WooCommerce Blocks styles its
	 * fields from its own properties, and its inputs still render a dark
	 * rgba(43,45,47,0.8) border. That surface needs its own pass; this mapping
	 * is not it.
	 *
	 * Left alone, the login fields had a hard rgba(32,7,7,0.8) border against
	 * the theme's #e8e2d8 everywhere else on the page. */
	--wc-form-border-color: var( --haat-input );
	--wc-form-border-width: 1px;
	--wc-form-color-text: var( --haat-foreground );
	--wc-form-color-background: var( --haat-background );
	--wc-primary: var( --haat-primary );
	--wc-primary-text: var( --haat-primary-foreground );
	--wc-highlight: var( --haat-primary );
	--wc-highlight-text: var( --haat-primary-foreground );

	/* ── Typography ───────────────────────────────────────────────────────
	 * Heading-range sizes scale with the "Heading size" control, body-range
	 * sizes with "Body text size". Each factor falls back to 1, so
	 * calc( <size> * 1 ) is exactly the shipped value. Line heights are left
	 * as unitless ratios so they track the scaled size automatically. */
	--haat-text-xs: calc( 0.75rem * var( --haat-body-scale, 1 ) );
	--haat-text-sm: calc( 0.875rem * var( --haat-body-scale, 1 ) );
	--haat-text-base: calc( 1rem * var( --haat-body-scale, 1 ) );
	--haat-text-lg: calc( 1.125rem * var( --haat-body-scale, 1 ) );
	--haat-text-xl: calc( 1.25rem * var( --haat-body-scale, 1 ) );
	--haat-text-2xl: calc( 1.5rem * var( --haat-heading-scale, 1 ) );
	--haat-text-3xl: calc( 1.875rem * var( --haat-heading-scale, 1 ) );
	--haat-text-4xl: calc( 2.25rem * var( --haat-heading-scale, 1 ) );
	--haat-text-5xl: calc( 3rem * var( --haat-heading-scale, 1 ) );
	--haat-text-6xl: calc( 3.75rem * var( --haat-heading-scale, 1 ) );

	/* One family for both roles. The display/body split earns its keep when the
	 * two faces genuinely contrast; two similar geometric sans-serifs just make
	 * headings and body text look subtly mismatched. Weight and size carry the
	 * hierarchy instead. */
	--haat-font-display: var( --haat-brand-font-display, "Manrope" ), "Segoe UI", system-ui, -apple-system, sans-serif;
	--haat-font-body: var( --haat-brand-font-body, "Manrope" ), "Segoe UI", system-ui, -apple-system, sans-serif;
	--haat-font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", monospace;

	--haat-weight-normal: 400;
	--haat-weight-medium: 500;
	--haat-weight-semibold: 600;
	--haat-weight-bold: 700;
	--haat-weight-black: 800;

	/* ── Shape and depth ──────────────────────────────────────────────────*/
	--haat-radius-sm: 6px;
	--haat-radius-md: 10px;
	--haat-radius-lg: 14px;
	--haat-radius-xl: 20px;
	--haat-radius-full: 9999px;

	--haat-shadow-soft: 0 2px 14px -4px rgba( 20, 30, 60, 0.08 ), 0 6px 22px -8px rgba( 20, 30, 60, 0.06 );
	--haat-shadow-card: 0 1px 2px rgba( 20, 30, 60, 0.04 ), 0 8px 24px -12px rgba( 20, 30, 60, 0.12 );
	--haat-shadow-glow: 0 8px 30px -8px color-mix( in oklab, var( --haat-primary ) 40%, transparent );
	--haat-shadow-pop: 0 12px 40px -12px rgba( 20, 30, 60, 0.22 );

	/* ── Motion ───────────────────────────────────────────────────────────*/
	--haat-ease-out: cubic-bezier( 0.16, 1, 0.3, 1 );
	--haat-ease-pop: cubic-bezier( 0.34, 1.56, 0.64, 1 );
	--haat-duration-fast: 150ms;
	--haat-duration-base: 250ms;
	--haat-duration-slow: 400ms;
	--haat-marquee-duration: 28s;

	/* ── Stacking ─────────────────────────────────────────────────────────
	 * Named so a new overlay never has to guess a number, and never lands
	 * under the sticky header by accident. */
	--haat-z-sticky: 30;
	--haat-z-dropdown: 40;
	--haat-z-drawer: 60;
	--haat-z-modal: 70;
	--haat-z-toast: 80;
}

/**
 * Dark mode.
 *
 * Ramps are INVERTED rather than re-picked: 50 to 900, 100 to 800, 200 to 700,
 * 300 to 600. Components pair a tint with its own deep shade for contrast (a
 * flame-50 plate under flame-700 ink), so swapping the ENDS keeps every such
 * pair legible automatically — including pairs added later. Re-picking ten
 * shades per ramp by hand would have to get every one of those pairings right
 * individually, and would silently break the next component someone writes.
 *
 * The saturated middle (400-600) is deliberately untouched: those follow the
 * merchant's brand colour, and a brand does not change colour at night.
 *
 * THE NEUTRALS DO NOT FOLLOW THE MERCHANT AT NIGHT
 * Every role below is a literal, not a var( --haat-brand-*, ... ) lookup, and
 * that is the whole point. The Customizer offers ONE value per role, and the
 * merchant picks it while looking at a light page — so "Text: #0a0e27" means
 * "near-black text on my pale background". Carrying that value into dark mode
 * inverts nothing: it paints near-black text on a near-black page, and the
 * store is unreadable the moment a visitor's device is set to dark. The same
 * leak made the top bar and footer DARKER than the page they sit on, which is
 * how the announcement bar vanished into the background.
 *
 * So the split is: the merchant owns the BRAND colours (accent, accent-2, and
 * the ink on them), which carry into both schemes untouched; the theme owns the
 * NEUTRALS and picks a set per scheme. Doing otherwise needs two values per
 * role in the Customizer — a much larger interface for a much smaller benefit.
 *
 * Chrome (the top bar and footer) is RAISED here rather than sunken. On a light
 * page, dark chrome reads as a deliberate band; on a dark page the equivalent is
 * a LIGHTER panel, because in a dark interface elevation reads as lightness.
 * Painting it darker than the page gave three near-identical greys stacked with
 * no edge between them.
 *
 * Both blocks below carry the same declarations rather than sharing them,
 * because an explicit merchant choice has to win over the OS preference in BOTH
 * directions. Collapsing them into one selector list would let a light-mode
 * choice lose to a dark OS setting.
 */
@media ( prefers-color-scheme: dark ) {
	:root:not( [data-haat-scheme="light"] ) {
		color-scheme: dark;

		--haat-flame-50: #3a0f04;
		--haat-flame-100: #5a1306;
		--haat-flame-200: #841d08;
		--haat-flame-300: #b62a0c;
		--haat-flame-800: #ffc09e;
		--haat-flame-900: #ffe3d4;

		--haat-midnight-50: #0a0e27;
		--haat-midnight-100: #131a31;
		--haat-midnight-200: #1f2a4a;
		--haat-midnight-300: #2f3d65;
		--haat-midnight-700: #97a5c5;
		--haat-midnight-800: #c4cee2;
		--haat-midnight-900: #e6ebf5;

		--haat-saffron-50: #2e1c00;
		--haat-saffron-100: #3a2400;
		--haat-saffron-200: #5b3900;
		--haat-saffron-300: #875400;
		--haat-saffron-800: #ffd672;
		--haat-saffron-900: #ffe9b0;

		--haat-cream: #121212;
		--haat-paper: #1a1a1a;

		--haat-background: #0e1016;
		--haat-foreground: #e9ecf5;
		--haat-surface: #171a22;
		--haat-surface-foreground: #e9ecf5;
		--haat-secondary: #1d222c;
		--haat-secondary-foreground: #e9ecf5;

		--haat-muted-foreground: #a3aac2;
		--haat-muted: #23262f;
		--haat-border: #2b2f3a;
		--haat-input: #2b2f3a;

		/* Shadows tuned for a light ground vanish on a dark one: deepen them
		 * and let the accent glow carry more of the elevation. */
		--haat-shadow-soft: 0 2px 14px -4px rgba( 0, 0, 0, 0.55 ), 0 6px 22px -8px rgba( 0, 0, 0, 0.45 );
		--haat-shadow-card: 0 1px 2px rgba( 0, 0, 0, 0.5 ), 0 8px 24px -12px rgba( 0, 0, 0, 0.6 );
		--haat-shadow-glow: 0 8px 34px -8px color-mix( in oklab, var( --haat-primary ) 55%, transparent );
		--haat-shadow-pop: 0 12px 40px -12px rgba( 0, 0, 0, 0.7 );
	}
}

:root[data-haat-scheme="dark"] {
	color-scheme: dark;

	--haat-flame-50: #3a0f04;
	--haat-flame-100: #5a1306;
	--haat-flame-200: #841d08;
	--haat-flame-300: #b62a0c;
	--haat-flame-800: #ffc09e;
	--haat-flame-900: #ffe3d4;

	--haat-midnight-50: #0a0e27;
	--haat-midnight-100: #131a31;
	--haat-midnight-200: #1f2a4a;
	--haat-midnight-300: #2f3d65;
	--haat-midnight-700: #97a5c5;
	--haat-midnight-800: #c4cee2;
	--haat-midnight-900: #e6ebf5;

	--haat-saffron-50: #2e1c00;
	--haat-saffron-100: #3a2400;
	--haat-saffron-200: #5b3900;
	--haat-saffron-300: #875400;
	--haat-saffron-800: #ffd672;
	--haat-saffron-900: #ffe9b0;

	--haat-cream: #121212;
	--haat-paper: #1a1a1a;

	--haat-background: #0e1016;
	--haat-foreground: #e9ecf5;
	--haat-surface: #171a22;
	--haat-surface-foreground: #e9ecf5;
	--haat-secondary: #1d222c;
	--haat-secondary-foreground: #e9ecf5;
	--haat-muted-foreground: #a3aac2;
	--haat-muted: #23262f;
	--haat-border: #2b2f3a;
	--haat-input: #2b2f3a;

	--haat-shadow-soft: 0 2px 14px -4px rgba( 0, 0, 0, 0.55 ), 0 6px 22px -8px rgba( 0, 0, 0, 0.45 );
	--haat-shadow-card: 0 1px 2px rgba( 0, 0, 0, 0.5 ), 0 8px 24px -12px rgba( 0, 0, 0, 0.6 );
	--haat-shadow-glow: 0 8px 34px -8px color-mix( in oklab, var( --haat-primary ) 55%, transparent );
	--haat-shadow-pop: 0 12px 40px -12px rgba( 0, 0, 0, 0.7 );
}