/**
 * Compression Works — single palette (no light/dark split).
 * Align typography scale with project reference; colors with brand accents.
 */
:root {
	/* Surfaces */
	--cw-bg: #0c0c0c;
	--cw-surface-1: #141414;
	--cw-surface-2: #1c1c1c;
	--cw-surface-3: #242424;

	/* Borders */
	--cw-border: rgba(255, 255, 255, 0.07);
	--cw-border-subtle: rgba(255, 255, 255, 0.04);

	/* Text */
	--cw-text: #dce0ea;
	--cw-text-muted: #8090a8;
	--cw-text-dim: #555;

	/* Brand */
	--cw-accent-primary: #dc2626;
	--cw-accent-secondary: #00b7fa;
	--cw-accent-primary-soft: rgba(220, 38, 38, 0.1);
	--cw-accent-secondary-soft: rgba(0, 183, 250, 0.1);

	/* Typography */
	--cw-font-body: "Assistant", system-ui, sans-serif;
	--cw-font-heading: "Antonio", system-ui, sans-serif;
	--cw-line-height-body: 1.6;
	--cw-line-height-heading: 1.18;
	--cw-line-height-h1: 1.08;
	--cw-line-height-tight: 1.2;
	--cw-letter-spacing-label: 0.08em;
	--cw-letter-spacing-h1: 0em;
	--cw-letter-spacing-tag: 0.05em;

	/*
	 * Type scale — 1.2× minor third. Mirrors Elementor kit globals
	 * (system_typography + custom_typography in class-cw-kit-tokens.php).
	 * Anchor for widget CSS, theme CSS, and any per-element font-size.
	 * Use the named tier vars; do not hardcode rem literals in new work.
	 */
	--cw-fs-display:  4.5rem;   /* 72px — hero brand statement */
	--cw-fs-h1:       3.75rem;  /* 60px — page-scale title */
	--cw-fs-h2:       3rem;     /* 48px — section headline */
	--cw-fs-h3:       2.25rem;  /* 36px — sub-section */
	--cw-fs-h4:       1.875rem; /* 30px — card / inline title */
	--cw-fs-h5:       1.5rem;   /* 24px — strong subtitle */
	--cw-fs-lead:     1.25rem;  /* 20px — intro paragraph */
	--cw-fs-body-lg:  1.125rem; /* 18px — emphasized body */
	--cw-fs-body:     1rem;     /* 16px — default */
	--cw-fs-body-sm:  0.875rem; /* 14px — UI / nav / eyebrow / button / footer */
	--cw-fs-caption:  0.75rem;  /* 12px — form label / mono / micro */

	/* Content width — overridden in PHP via compression_works_content_max_width */
	--cw-content-max-width: 1280px;

	/*
	 * Default horizontal gutter (header strip, CW Heading inner, etc.); applied below 1366px width
	 * so Elementor laptop + tablet + phone previews match. Pair with env(safe-area-inset-*).
	 */
	--cw-gutter-inline: clamp(1rem, 5vw, 1.5rem);

	/* Measured live by cw-header-layout.js (header / #backdrop height); drives content overlap offset. */
	--cw-site-header-height: 0px;
	/* Optional px added to the negative margin calc (less negative = less pull-up). */
	--cw-header-overlap-extra: 0px;
}