/* Design tokens: assets/css/tokens.css */
/* Source: Figma styles (fonts, colors, buttons). Values marked "check" need confirmation. */

:root {
	/* Colors */
	--color-bg: #08080A;
	--color-surface-1: #1B1B22;
	--color-surface-2: #24242D;
	--color-light: #F2F2F2;
	--color-text: #DDDDE3;
	--color-text-muted: rgba(221, 221, 227, 0.7);
	--color-border: rgba(221, 221, 227, 0.5);

	--color-cta-primary: #F4490F;           /* check: Figma swatch shows #FF3000, button CSS uses #F4490F */
	--color-cta-primary-hover: #F4490F;
	--color-cta-primary-focus: #DC4012;     /* check: estimated from the button states image */
	--color-cta-secondary: #804EFF;         /* check: swatch shows #7E4BFF, button CSS uses #804EFF */
	--color-cta-secondary-hover: #804EFF;
	--color-cta-secondary-focus: #5B38DD;   /* check: estimated */
	--color-on-cta-primary: #FFFFFF;
	--color-on-cta-secondary: #FFEEEE;

	/* Typography */
	--font-main: 'Poppins', system-ui, sans-serif;

	--fs-h1: 80px;   --lh-h1: 1.5;    /* check: Figma text styles panel (labels on the sheet say 80/64/48/36) */
	--fs-h2: 65px;   --lh-h2: 1.3;
	--fs-h3: 55px;   --lh-h3: 1.15;
	--fs-h4: 38px;   --lh-h4: 1.2;
	--fs-body: 16px; --lh-body: 1.5;
	--fs-link: 18px; --lh-link: 1.5;
	--fs-btn: 18px;  --lh-btn: 1.5;

	/* Shape */
	--radius-btn: 74px;
	--btn-padding: 20px 40px;
	--btn-gap: 16px;
}

/* Mobile: scale headings down (adjust to Figma mobile styles when available) */
@media (max-width: 768px) {
	:root {
		--fs-h1: 44px;
		--fs-h2: 36px;
		--fs-h3: 30px;
		--fs-h4: 24px;
	}
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-main);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 400; }