/* =========================================================
   DESIGN TOKENS
   Extracted from the approved desktop + mobile mockups.
   Every other stylesheet consumes these — never hardcode a
   raw color/size value in component CSS, reference the token.
========================================================= */

:root {

	/* ---------- Color: base ---------- */
	--mcg-bg:            #0a0a0a;
	--mcg-bg-alt:        #121212;
	--mcg-bg-card:       #141414;
	--mcg-border:        rgba(255, 255, 255, 0.08);
	--mcg-border-strong: rgba(255, 255, 255, 0.16);

	/* ---------- Color: text ---------- */
	--mcg-text:          #ffffff;
	--mcg-text-muted:    #a3a3a3;
	--mcg-text-dim:      #6b6b6b;

	/* ---------- Color: brand ---------- */
	--mcg-orange:        #ff5a1f;
	--mcg-orange-dim:    #7a3216;

	/* ---------- Color: division accents ---------- */
	--mcg-blue:          #2e9ef5;
	--mcg-purple:        #a855f7;

	/* ---------- Type ---------- */
	--mcg-font-display:  'Archivo Black', 'Arial Black', sans-serif;
	--mcg-font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--mcg-fs-hero:       clamp(2.75rem, 5vw, 4.5rem);
	--mcg-fs-h2:         clamp(2rem, 3.4vw, 3rem);
	--mcg-fs-h3:         clamp(1.5rem, 2.2vw, 2rem);
	--mcg-fs-body-lg:    1.125rem;
	--mcg-fs-body:       1rem;
	--mcg-fs-small:      0.8125rem;
	--mcg-fs-eyebrow:    0.8125rem;
	--mcg-fs-typography: clamp(3rem, 9vw, 8rem);

	--mcg-lh-tight:      1.05;
	--mcg-lh-normal:     1.6;

	--mcg-ls-eyebrow:    0.18em;
	--mcg-ls-wide:       0.06em;

	/* ---------- Layout ---------- */
	--mcg-container-max: 1560px;
	--mcg-gutter:        clamp(1.25rem, 4vw, 3rem);
	--mcg-rail-width:    88px;
	--mcg-section-pad-y: clamp(4rem, 8vw, 8rem);

	--mcg-radius-sm:     6px;
	--mcg-radius-md:     10px;
	--mcg-radius-lg:     18px;
	--mcg-radius-pill:   999px;

	/* ---------- Motion ---------- */
	--mcg-ease:          cubic-bezier(0.16, 1, 0.3, 1);
	--mcg-ease-soft:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--mcg-dur-fast:      0.2s;
	--mcg-dur-base:      0.4s;
	--mcg-dur-slow:      0.8s;

	/* ---------- Z-index scale ---------- */
	--mcg-z-header:      100;
	--mcg-z-rail:        90;
	--mcg-z-mobile-menu: 200;
	--mcg-z-scroll-ind:  20;
}
