/*
 * Design tokens.
 *
 * Subset of docs/architecture.md §6 — grown incrementally as real
 * pages need more of the palette/scale, not the full token set yet
 * (no self-hosted webfonts loaded so far, so font tokens fall back
 * to system stacks for now). Every reusable numeric/color value used
 * across layout.css/components.css/pages.css should come from here
 * rather than being repeated as a scattered literal.
 *
 * @package IglooRack
 */

:root {
	/* Color: dark surfaces */
	--color-black: #0a0c0e;
	--color-ink: #14171a;
	--color-graphite: #2a2e33;

	/* Color: steel (neutral) scale */
	--color-steel-50: #f5f6f7;
	--color-steel-100: #e9ebed;
	--color-steel-200: #dce0e3;
	--color-steel-300: #c3c9ce;
	--color-steel-400: #9aa3ab;
	--color-steel-500: #74808a;
	--color-steel-600: #57626b;

	/* Color: steel-blue (technical surface) scale */
	--color-steel-blue-50: #eef2f5;
	--color-steel-blue-100: #dde6ec;
	--color-steel-blue-600: #4a6478;

	/* Color: light surface */
	--color-white: #ffffff;

	/* Color: accents */
	--color-ice-500: #2e8fff;
	--color-ice-600: #0b6fe0;
	--color-cyan-400: #00c2d1;

	/* Color: brand — the IglooRack logo blue (#0f7ca5, measured from the
	   logo artwork). Primary buttons/CTAs use it so they match the logo.
	   White text contrast: 600 ≈ 4.8:1, 700 ≈ 6:1, 800 ≈ 7.6:1 (WCAG AA). */
	--color-brand-600: #0f7ca5;
	--color-brand-700: #0d6a8d;
	--color-brand-800: #0b5a78;
	--color-brand-focus: rgba( 15, 124, 165, 0.45 );

	/* Product image canvas (4:3, black — see .igloorack-media-canvas). */
	--color-product-canvas: #000000;

	/* Spacing (4px increments) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;

	/* Radii — restrained, no pill shapes */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Type */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--font-size-eyebrow: 0.8rem;
	--font-size-meta: 0.85rem;
	--font-size-nav: 1rem;
	--font-size-button: 0.9rem;
	--font-size-body: 1.0625rem;
	--font-size-h3: clamp( 1.15rem, 1.6vw, 1.35rem );
	--font-size-h2: clamp( 1.5rem, 2.8vw, 2.1rem );
	--font-size-h1: clamp( 2.1rem, 5vw, 3.5rem );

	/* Layout */
	--container-max: 1280px;
	--measure: 65ch;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba( 10, 12, 14, 0.08 );
	--shadow-md: 0 8px 28px rgba( 10, 12, 14, 0.2 );

	/* Overlays (image scrims for text legibility) */
	--overlay-dark: rgba( 10, 12, 14, 0.72 );
	--overlay-dark-strong: rgba( 10, 12, 14, 0.86 );

	/* True black — header, dropdowns, footer, and dark promotional surfaces that are
	   meant to feel genuinely premium/bold. Kept distinct from --color-ink (still used
	   as a near-black text color everywhere) and --color-black (kept for the sections
	   not called out for this treatment) so the change stays scoped and intentional. */
	--color-jet: #000000;
	--overlay-jet: rgba( 0, 0, 0, 0.72 );
	--overlay-jet-strong: rgba( 0, 0, 0, 0.88 );

	/* Fixed header footprint on the home page only (see layout.css .igloorack-site-header
	   overlay rules) — derived from the real header markup: tech-strip padding-block
	   (space-2 * 2) + its line-height, plus the main row's padding-block (space-2 top +
	   space-4 bottom) +
	   the custom-logo's max 52px height. Kept as one shared value so the hero's negative
	   margin and main's reserved padding can never drift apart. Update this if
	   header.php's vertical rhythm changes. */
	--header-fixed-height: 112px;

	/* Layering */
	--z-header: 40;
	--z-dropdown: 50;
	--z-modal: 90;
	--z-skip-link: 100;

	/* Image aspect ratios */
	--aspect-wide: 16 / 9;
	--aspect-card: 4 / 3;
	--aspect-square: 1 / 1;
}

@media ( max-width: 640px ) {
	:root {
		/* Tech-strip text/padding shrinks below this breakpoint (components.css). */
		--header-fixed-height: 100px;
	}
}