/**
 * RAMSTI design tokens - v2 (brand system).
 *
 * Scoped to body.rf: these variables exist only on pages rendered by the new
 * frontend, never on legacy WoodMart/Elementor pages.
 *
 * Brand: strict monochrome UI (photography carries the colour), Oswald headings,
 * Brendon body/UI. Brendon is loaded when its licensed files are present in
 * assets/fonts/brendon/ (see inc/assets.php); until then body text uses Lora.
 * Secondary text and hairlines are black at reduced opacity, not extra colours.
 *
 * Breakpoints (custom properties can't be used in @media; keep in sync):
 *   --bp-tablet 600px | --bp-desktop 900px | --bp-wide 1200px | --bp-xwide 1600px
 */

body.rf {
	/* ------------------------------------------------------------------ Colour */
	--color-background: #ffffff;
	--color-text: #000000;
	--color-button-bg: #000000;
	--color-button-text: #ffffff;
	--color-text-secondary: rgb(0 0 0 / 0.6);
	--color-hairline: rgb(0 0 0 / 0.12);
	--color-placeholder: #f4f4f4;          /* image loading only */
	--color-on-image: #ffffff;             /* UI over dark photography */
	--color-overlay: rgb(0 0 0 / 0.28);    /* dims the page behind menus */

	/* Aliases used by components (keep components on semantic names). */
	--color-bg: var(--color-background);
	--color-surface: var(--color-placeholder);
	--color-text-muted: var(--color-text-secondary);
	--color-border: var(--color-hairline);
	--color-focus: var(--color-text);
	--color-selection: rgb(0 0 0 / 0.12);
	--color-error: var(--color-text);

	/* -------------------------------------------------------------- Typefaces */
	--font-heading: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Brendon", "Lora", Georgia, serif;
	--font-display: var(--font-heading);
	--font-nav: var(--font-body);

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;

	/* ------------------------------------------------------------- Type roles */
	/* Display (hero/campaign titles): Oswald, restrained size, uppercase. */
	--type-display-font: var(--font-heading);
	--type-display-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
	--type-display-weight: var(--weight-light);
	--type-display-leading: 1.05;
	--type-display-tracking: 0.04em;
	--type-display-case: uppercase;

	/* Headings: Oswald. */
	--type-heading-font: var(--font-heading);
	--type-heading-size-sm: 0.8125rem;
	--type-heading-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--type-heading-size-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--type-heading-weight: var(--weight-regular);
	--type-heading-leading: 1.15;
	--type-heading-tracking: 0.04em;
	--type-heading-case: uppercase;

	/* Body: Brendon/Lora. */
	--type-body-font: var(--font-body);
	--type-body-size: 0.8125rem;
	--type-body-size-lg: 0.9375rem;
	--type-body-weight: var(--weight-regular);
	--type-body-leading: 1.6;
	--type-body-tracking: 0;

	/* Navigation / UI. */
	--type-nav-font: var(--font-nav);
	--type-nav-size: 0.75rem;
	--type-nav-size-lg: 1.125rem;
	--type-nav-weight: var(--weight-regular);
	--type-nav-leading: 1.3;
	--type-nav-tracking: 0.02em;

	/* Caption / small print. */
	--type-caption-font: var(--font-body);
	--type-caption-size: 0.6875rem;
	--type-caption-weight: var(--weight-regular);
	--type-caption-leading: 1.45;
	--type-caption-tracking: 0.02em;

	/* Price. */
	--type-price-font: var(--font-body);
	--type-price-size: 0.75rem;
	--type-price-weight: var(--weight-regular);
	--type-price-leading: 1.4;
	--type-price-tracking: 0.02em;
	--type-price-numerals: tabular-nums;

	/* Button. */
	--type-button-font: var(--font-body);
	--type-button-size: 0.75rem;
	--type-button-weight: var(--weight-medium);
	--type-button-leading: 1;
	--type-button-tracking: 0.04em;

	/* --------------------------------------------------------------- Spacing */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	--space-4xl: 8rem;

	/* Editorial rhythm: controlled, dense enough to read as one continuous page. */
	--space-section: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
	--space-section-tight: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	--space-editorial: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	--space-grid-x: 0.25rem;               /* gutter between full-bleed images */
	--space-grid-y: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	--space-nav-item: clamp(1rem, 0.5rem + 0.9vw, 1.75rem);
	--space-header-x: var(--gutter);

	/* ---------------------------------------------------------------- Layout */
	--layout-max: 90rem;
	--layout-wide: 120rem;
	--layout-text: 38rem;

	--gutter-mobile: 1rem;
	--gutter-tablet: 1.25rem;
	--gutter-desktop: 1.5rem;
	--gutter: var(--gutter-mobile);

	--header-height: 3rem;
	--announcement-height: 2rem;
	--brand-height: 1.25rem;          /* logo height; +25% (was 1rem) */
	--drawer-width: 26rem;
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);

	/* ---------------------------------------------------------------- Images */
	--ratio-product: 2 / 3;
	--ratio-editorial: 3 / 4;
	--ratio-hero: 16 / 9;
	--ratio-hero-mobile: 3 / 4;

	/* ---------------------------------------------------------------- Motion */
	--duration-fast: 120ms;
	--duration-standard: 220ms;
	--duration-slow: 420ms;
	--duration-menu: 260ms;
	--duration-drawer: 380ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	/* ---------------------------------------------------------------- Layers */
	--z-content: 1;
	--z-scrim: 40;
	--z-header: 50;
	--z-skip-link: 100;
}

@media (min-width: 600px) {
	body.rf {
		--gutter: var(--gutter-tablet);
	}
}

@media (min-width: 900px) {
	body.rf {
		--header-height: 3.25rem;
		--brand-height: 1.4375rem;     /* +28% (was 1.125rem) */
	}
}

@media (min-width: 1200px) {
	body.rf {
		--gutter: var(--gutter-desktop);
	}
}

@media (max-width: 600px) {
	body.rf {
		--admin-bar: 0px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.rf {
		--duration-fast: 1ms;
		--duration-standard: 1ms;
		--duration-slow: 1ms;
		--duration-menu: 1ms;
		--duration-drawer: 1ms;
	}
}