/* =====================================================================================================================
 * Solomaxhub design tokens — 11.6.0-solomax.64 (owner-approved rulebook, 30 Sep 2026).
 * Loaded on every customer page: storefront, checkout, receipts and the customer portal. Every size, gap, colour,
 * corner and shadow in the theme and portal stylesheets comes from these values. Edit here, not in the page files.
 * Brand: orange #FD7702 accent on warm cream with a faint dot texture (page background only); bold, big, legible text
 * and prices; a matching dark mode.
 * ===================================================================================================================== */
:root {
	/* spacing: 8-point scale (4 8 12 16 24 32 48 64); larger layout offsets are multiples of 8 */
	--sx-space-1: 4px;
	--sx-space-2: 8px;
	--sx-space-3: 12px;
	--sx-space-4: 16px;
	--sx-space-5: 24px;
	--sx-space-6: 32px;
	--sx-space-7: 48px;
	--sx-space-8: 64px;
	--sx-gutter: 16px;             /* side gutter; 24 on tablets, 32 on computers */
	--sx-section: 48px;            /* between page sections; 64 on tablets and computers */
	--sx-stack: 16px;              /* between cards in a list or grid; 24 on tablets and computers */
	--sx-page-max: 1320px;         /* the widest a page gets, gutters included (header, storefront pages) */

	/* type: Inter, three weights, seven sizes with fixed line heights and letter-spacing */
	--sx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sx-w-regular: 400;
	--sx-w-semibold: 600;
	--sx-w-bold: 800;
	--sx-t-12: 12px; --sx-lh-12: 16px; --sx-ls-12: 0.01em;
	--sx-t-14: 14px; --sx-lh-14: 20px; --sx-ls-14: 0;
	--sx-t-16: 16px; --sx-lh-16: 24px; --sx-ls-16: 0;
	--sx-t-18: 18px; --sx-lh-18: 26px; --sx-ls-18: -0.005em;
	--sx-t-22: 22px; --sx-lh-22: 28px; --sx-ls-22: -0.01em;
	--sx-t-28: 28px; --sx-lh-28: 34px; --sx-ls-28: -0.015em;
	--sx-t-36: 36px; --sx-lh-36: 42px; --sx-ls-36: -0.02em;
	--sx-caps-ls: 0.06em;          /* ALL-CAPS labels only (12px) */
	/* the two heading sizes that step up on bigger screens (a step on the scale, never a size in between) */
	--sx-t-display: 28px; --sx-lh-display: 34px; --sx-ls-display: -0.015em;
	--sx-t-title: 22px;   --sx-lh-title: 28px;   --sx-ls-title: -0.01em;

	/* shape */
	--sx-r-sm: 8px;
	--sx-r-md: 12px;
	--sx-r-lg: 16px;
	--sx-r-pill: 999px;
	--sx-focus: 0 0 0 3px rgba(253, 119, 2, 0.45);

	/* colour: light */
	--sx-orange: #FD7702;
	--sx-orange-hover: #E86A00;
	--sx-orange-pressed: #C95A00;
	--sx-orange-soft: #FFF1E3;
	--sx-orange-text: #A34100;     /* orange text and links: 5.9:1 on cream */
	--sx-orange-large: #C95A00;    /* orange words in big headings (24px+ bold): 3.8:1 on the soft orange band */
	--sx-on-orange: #1C1410;       /* text on orange: 6.8:1 */
	--sx-text: #1C1410;
	--sx-text-2: #4A3F37;
	--sx-text-muted: #6B5E54;      /* the lightest text allowed: 5.9:1 */
	--sx-page: #FAF7F2;
	--sx-card: #FFFFFF;
	--sx-raised: #FFFFFF;
	--sx-sunken: #F5EFE7;
	--sx-line: #E9DFD3;
	--sx-line-strong: #8F7B6A;     /* input and outline-button borders: 3.8:1 */
	--sx-success: #166534;  --sx-success-soft: #ECFDF3;
	--sx-warning: #B54708;  --sx-warning-soft: #FFFAEB;
	--sx-error: #B42318;    --sx-error-soft: #FEF3F2;
	--sx-whatsapp: #15803D;

	/* depth: soft, calm */
	--sx-shadow-1: 0 1px 2px rgba(28, 20, 16, 0.06);
	--sx-shadow-2: 0 8px 24px rgba(28, 20, 16, 0.10), 0 1px 2px rgba(28, 20, 16, 0.06);

	/* texture: page background only */
	--sx-texture: radial-gradient(rgba(194, 65, 12, 0.07) 1px, transparent 1.3px);

	/* components */
	--sx-btn-h: 48px;
	--sx-hit: 44px;
	--sx-input-h: 48px;
	--sx-icon-inline: 16px;
	--sx-icon-ui: 20px;
	--sx-icon-nav: 24px;
	--sx-icon-feature: 32px;
	--sx-header-h: 64px;           /* one header height for the storefront and the portal */
	--sx-logo-h: 28px;            /* 32 on tablets and computers */
}
@media (min-width: 768px) {
	:root { --sx-gutter: 24px; --sx-section: 64px; --sx-stack: 24px; --sx-t-display: 36px; --sx-lh-display: 42px; --sx-ls-display: -0.02em; --sx-t-title: 28px; --sx-lh-title: 34px; --sx-ls-title: -0.015em; }
}
@media (min-width: 900px) { :root { --sx-header-h: 72px; --sx-logo-h: 32px; } }
@media (min-width: 1200px) { :root { --sx-gutter: 32px; } }

/* colour: dark (same names, dark values) — storefront (html[data-sx-theme]) and portal (body[data-ux-theme]) */
html[data-sx-theme="dark"], [data-ux-theme="dark"] {
	--sx-orange: #FD7702;
	--sx-orange-hover: #FF8A24;
	--sx-orange-pressed: #E86A00;
	--sx-orange-soft: #3A2618;
	--sx-orange-text: #FDBA74;
	--sx-orange-large: #FD7702;
	--sx-on-orange: #1C1410;
	--sx-text: #F3EDE6;
	--sx-text-2: #D8CEC4;
	--sx-text-muted: #B3A69A;
	--sx-page: #16120F;
	--sx-card: #211A16;
	--sx-raised: #2A221D;
	--sx-sunken: #1B1512;
	--sx-line: rgba(255, 236, 220, 0.12);
	--sx-line-strong: #7A6A5D;
	--sx-success: #4ADE80;  --sx-success-soft: #13261A;
	--sx-warning: #FBBF24;  --sx-warning-soft: #2B2110;
	--sx-error: #F87171;    --sx-error-soft: #2A1515;
	--sx-shadow-1: none;
	--sx-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);
	--sx-texture: radial-gradient(rgba(255, 154, 31, 0.07) 1px, transparent 1.3px);
}

/* the few base rules the tokens imply */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.woocommerce-Price-amount, .amount, [data-ux-balance-figure], .sx-money, code, kbd, samp { font-variant-numeric: tabular-nums; }