/*
 * Single source of truth for design values. See docs/design-system.md.
 * 8pt system: every spacing and size is a multiple of 8px (4px only for tight text gaps).
 */
:root {
	/* Colors */
	--color-primary:    var(--wp--preset--color--primary, #f9a51c);
	--color-secondary:  var(--wp--preset--color--secondary, #1a2a56);
	--color-bg:         var(--wp--preset--color--background, #232323);
	--color-bg-alt:     var(--wp--preset--color--background-alt, #1c1c1c);
	--color-heading:    var(--wp--preset--color--heading, #ffffff);
	--color-text:       var(--wp--preset--color--text, #bdbdbd);
	--color-on-primary: var(--color-bg-alt);
	--color-border:     rgb(255 255 255 / 0.2);
	--color-pattern:    rgb(255 255 255 / 0.1);
	--color-backdrop:   rgb(28 28 28 / 0.9);
	--color-error:      #ff6b5b;
	--overlay-image:    linear-gradient(180deg, rgb(35 35 35 / 0) 65%, var(--color-bg) 100%), linear-gradient(rgb(35 35 35 / 0.6), rgb(35 35 35 / 0.6));
	--overlay-card:     linear-gradient(180deg, rgb(28 28 28 / 0) 40%, rgb(28 28 28 / 0.85) 100%);

	/* Spacing (named by pixel value) */
	--space-4:   0.25rem;
	--space-8:   0.5rem;
	--space-16:  1rem;
	--space-24:  1.5rem;
	--space-32:  2rem;
	--space-40:  2.5rem;
	--space-48:  3rem;
	--space-56:  3.5rem;
	--space-64:  4rem;
	--space-80:  5rem;
	--space-96:  6rem;
	--space-128: 8rem;

	/* Layout */
	--container-max:  87.5rem;  /* 1400px */
	--gutter:         var(--space-16);
	--section-space:  var(--space-56);
	/* Layout gaps: tighter on phones, design values from 768px up */
	--gap-xl:         var(--space-40);  /* 64px from 768px */
	--gap-l:          var(--space-32);  /* 48px from 768px */
	--gap-ml:         var(--space-24);  /* 40px from 768px */
	--gap-m:          var(--space-24);  /* 32px from 768px */
	--header-height:  4.5rem;   /* 72px */
	--grid-gap:       var(--space-16);  /* gap between cards: 1rem on phones, 24px from 768px */
	/* Chamfered corner sizes. Only the large one shrinks on phones. */
	--cut-l:          var(--space-32);  /* 64px from 768px: images, cards, sections */
	--cut-m:          var(--space-40);  /* CTA panel */
	--cut-sm:         var(--space-32);  /* stat cards */
	--cut:            var(--cut-l);
	--cut-s:          var(--space-8);

	/* Type */
	--font-heading: var(--wp--preset--font-family--heading, "Orbitron", system-ui, sans-serif);
	--font-body:    var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);

	--text-display: 2rem;      --leading-display: 2.5rem;   /* 32/40, 48/64 desktop */
	--text-h2:      1.5rem;    --leading-h2:      2rem;     /* 24/32, 32/44 desktop */
	--text-h3:      1.25rem;   --leading-h3:      1.75rem;  /* 20/28, 24/32 desktop */
	--text-h4:      1.125rem;  --leading-h4:      1.75rem;  /* 18/28 */
	--text-lead:    1.125rem;  --leading-lead:    1.75rem;  /* 18/28 */
	--text-body:    1rem;      --leading-body:    1.5rem;   /* 16/24 */
	--text-small:   0.915rem;  --leading-small:   1.25rem;  /* 14/20 */
	--text-xs:      0.75rem;   --leading-xs:      1rem;     /* 12/16 */

	--tracking-heading: 0.05em;
	--tracking-label:   0.03em;
	--weight-regular:   400;
	--weight-medium:    500;

	/* Misc */
	--border:     1px solid var(--color-border);
	--focus-ring: 2px solid var(--color-primary);
	--transition: 200ms ease;
	--z-header:   50;
}

@media (min-width: 48em) { /* 768px */
	:root {
		--gutter:        var(--space-32);
		--section-space: var(--space-80);
		--gap-xl:        var(--space-64);
		--gap-l:         var(--space-48);
		--gap-ml:        var(--space-40);
		--gap-m:         var(--space-32);
		--cut-l:         var(--space-64);
		--grid-gap:      var(--space-24);
		--text-h2: 2rem;     --leading-h2: 2.75rem;
		--text-h3: 1.5rem;   --leading-h3: 2rem;
	}
}

@media (min-width: 75em) { /* 1200px */
	:root {
		--section-space: var(--space-96);
		--text-display: 3rem; --leading-display: 4rem;
	}
}