/**
 * Design tokens.
 *
 * Values marked (figma-var) are bound variables in the Figma file and are
 * authoritative. Values marked (measured) were read off the frames via
 * get_design_context. Do not invent values here - if a number is needed and
 * not listed, measure it from Figma first.
 *
 * Figma: T65ZxRuzRpJVc4rF694DWf, page 0:1
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;          /* variable axis - one file covers every weight */
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---- color: figma-var ---- */
	--ts-white:        #ffffff;
	--ts-ink:          #1a1a23;
	--ts-text:         #4b4f60;
	--ts-brand:        #413fc9;
	--ts-bg:           #eeecf2;
	--ts-bg-soft:      #f7f5f9;
	--ts-muted:        #a8b1c8;

	/* ---- color: measured, no bound variable ---- */
	--ts-brand-light:  #8785f1;
	--ts-pos:          #0e9f5f;
	--ts-neg:          #dc3b42;
	--ts-bar-top:      #4341ca;
	--ts-bar-bottom:   #8988f3;

	/* ---- derived ---- */
	--ts-hairline:     rgba(26, 26, 35, .1);

	/* ---- type ---- */
	--ts-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, sans-serif;

	/* Figma type styles. The -2 tracking on h2 is what gives the design its
	   condensed look - it is not a different typeface. */
	--ts-h2-size:      52px;
	--ts-h2-lh:        60px;
	--ts-h2-ls:        -2px;

	--ts-h3-size:      24px;
	--ts-h3-lh:        32px;

	--ts-b2-size:      20px;
	--ts-b2-lh:        32px;

	--ts-b1-size:      16px;
	--ts-b1-lh:        22px;

	--ts-eyebrow-size: 14px;
	--ts-eyebrow-lh:   18px;
	--ts-eyebrow-ls:   1px;

	/* ---- layout (measured) ----
	   Header logo left edge sits at x=130 and the right CTA ends at x=1310 in a
	   1440 frame, so the content column is exactly 1180px. */
	--ts-container:    1180px;
	--ts-gutter:       20px;
	--ts-header-h:     77px;

	/* ---- radii (measured) ---- */
	--ts-r-logo:       14px;
	--ts-r-pill:       999px;

	/* ---- shadows (measured) ---- */
	--ts-shadow-logo:      0 14px 15px rgba(65, 63, 201, .22);
	/* Button component 1:375. The header pill uses a slightly heavier one. */
	--ts-shadow-btn:       0 14px 16px rgba(26, 26, 35, .16);
	--ts-shadow-btn-hdr:   0 14px 17.5px rgba(26, 26, 35, .18);
	--ts-shadow-card:      0 24px 70px rgba(26, 26, 35, .1);

	/* ---- hero (node 1:32) ---- */
	--ts-h1-size:      84px;
	--ts-h1-lh:        90px;
	--ts-h1-ls:        -4px;
}