/**
 * 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: 1400px;

	/*
	 * 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);

	/*
	 * Canonical content-rail gutter (incl. notch safety). The CW rail pattern is:
	 *   .inner { width: min(100% - 2 * var(--cw-rail-gutter), <max-width>); margin-inline: auto; }
	 * Gutter appears only when the viewport is cramped; on wide screens the rail hits its
	 * max-width with NO interior padding (content never shrinks, never touches the edge).
	 */
	--cw-rail-gutter: max(var(--cw-gutter-inline), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

	/*
	 * Spacing scale — 4px base. Single source of truth for padding / margin / gap.
	 * Use the named tier vars; do not hardcode rem/px spacing literals in new work.
	 *   3xs 4 · 2xs 8 · xs 12 · sm 16 · md 20 · lg 24 · xl 32 · 2xl 40 · 3xl 48 · 4xl 64 · 5xl 80
	 */
	--cw-space-3xs: 0.25rem; /*  4px */
	--cw-space-2xs: 0.5rem;  /*  8px */
	--cw-space-xs:  0.75rem; /* 12px */
	--cw-space-sm:  1rem;    /* 16px */
	--cw-space-md:  1.25rem; /* 20px */
	--cw-space-lg:  1.5rem;  /* 24px */
	--cw-space-xl:  2rem;    /* 32px */
	--cw-space-2xl: 2.5rem;  /* 40px */
	--cw-space-3xl: 3rem;    /* 48px */
	--cw-space-4xl: 4rem;    /* 64px */
	--cw-space-5xl: 5rem;    /* 80px */

	/* Section vertical rhythm — fluid; one source of truth for full-bleed widget bands. */
	--cw-band-y: clamp(3rem, 6vw, 6rem);

	/* Shared component micro-padding (chips / pills / badges). */
	--cw-pad-chip: var(--cw-space-3xs) var(--cw-space-xs); /* 4px 12px */

	/* 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;
}