/*
 * Hydro Shield — design tokens + reset.
 *
 * Foundation only: no section/component styling. Palette is locked per
 * project brief.
 *
 * Type family (2026-09-20, direct user request — "font bi alva ka use
 * karo", structural/typography reference only, same rule as the layout
 * work elsewhere: never alva.com.my's colours/copy/images, just its
 * choices where explicitly asked for): sitewide base font switched from
 * the placeholder system stack to Inter (ALVA's own body/heading font,
 * loaded via functions.php's wp_enqueue_scripts — see its comment there).
 * `--hs-font-display` is new: ALVA's own pattern is Inter everywhere
 * EXCEPT its big price numbers, which use a rounded display face called
 * "Konkhmer Sleokchher" — reserved the same way here, applied only to
 * `.hs-ppf-hero__price-value` and `.hs-wt-hero__price-value` (the two
 * hero price numbers on this site), not as a second base font.
 */

:root {
	/* Colour system — cyan is an accent only, ~90-95% of the UI stays neutral. */
	--hs-color-graphite: #1a1a1d;
	--hs-color-grey-dark: #3a3a3e;
	--hs-color-grey-mid: #5a5a5e;
	--hs-color-off-white: #f0f0e8;
	--hs-color-silver: #c0c0c0;
	--hs-color-cyan: #00e5ff;

	--hs-color-bg: var(--hs-color-graphite);
	--hs-color-surface: var(--hs-color-grey-dark);
	--hs-color-text: var(--hs-color-off-white);
	--hs-color-text-muted: var(--hs-color-silver);
	--hs-color-accent: var(--hs-color-cyan);

	/* Type scale. */
	--hs-font-base: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
	--hs-font-display: 'Konkhmer Sleokchher', 'Inter', sans-serif;

	/* Spacing scale (4px base). */
	--hs-space-1: 0.25rem;
	--hs-space-2: 0.5rem;
	--hs-space-3: 1rem;
	--hs-space-4: 1.5rem;
	--hs-space-5: 2.5rem;
	--hs-space-6: 4rem;

	/* Restrained radii — premium/technical, not "rounded everywhere". */
	--hs-radius-sm: 2px;
	--hs-radius-md: 4px;

	/* Motion tokens, ready for GSAP-driven work in a later command. */
	--hs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--hs-duration-fast: 150ms;
	--hs-duration-base: 300ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--hs-font-base);
	background: var(--hs-color-bg);
	color: var(--hs-color-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

/* Boot-check diagnostic page only — not a real site section. */
.hs-boot {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--hs-space-5);
	gap: var(--hs-space-2);
}

.hs-boot__title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	margin: 0;
}

.hs-boot__meta,
.hs-boot__note {
	color: var(--hs-color-text-muted);
	margin: 0;
	font-size: 0.9rem;
}