/*
 * Formsieve design tokens (Studio Pop), from "Formsieve Brand Sheet.dc.html"
 * and the page artboards. Values are copied, never rounded.
 */
:root {
	/* Colour */
	--fs-navy: #150735;          /* ink, footer, dark buttons */
	--fs-violet: #553BFB;        /* hero blocks, links, "Delivered" */
	--fs-pink: #FA2E9C;          /* "Caught" and the logo dot only */
	--fs-orange: #FFB364;        /* primary buttons, cost */
	--fs-lavender: #E5D8E9;      /* section blocks, cards */
	--fs-lime: #8DE746;          /* accent cards, success */
	--fs-tint: #F3EEF5;          /* inset panels inside white cards */
	--fs-white: #FFFFFF;
	--fs-line: #D9CFE0;          /* hairlines between rows */
	--fs-ph-bg: #FFF1F8;         /* placeholder background */
	--fs-violet-light: #8A74FF;  /* mesh dots, off-canvas rules */
	--fs-footer-rule: #3A2D66;   /* footer divider */
	--fs-canvas: #E6E3DD;        /* design canvas (not used on the site) */

	/* Type */
	--fs-font-display: 'Unbounded', sans-serif;
	--fs-font-body: 'DM Sans', sans-serif;
	--fs-font-mono: 'IBM Plex Mono', monospace;

	/* Type scale, desktop (brand sheet) */
	--fs-display: 68px;   /* Unbounded 800 / 1.02 / -3.5% */
	--fs-display-lh: 1.02;
	--fs-h1: 64px;        /* page titles (Pricing, Thank you, 404) */
	--fs-h2: 48px;        /* Unbounded 800 / 1.08 / -3% */
	--fs-h3: 24px;        /* Unbounded 700 / 1.2 */
	--fs-lead: 19px;      /* DM Sans 400 / 1.6 */
	--fs-lead-lh: 1.6;
	--fs-body: 16px;      /* DM Sans 400 / 1.6 */
	--fs-small: 14px;     /* DM Sans 400 / 1.5 */
	--fs-mono: 14px;      /* IBM Plex Mono 400 */
	--fs-eyebrow: 16px;   /* Unbounded 700 section labels */

	/* Radius */
	--fs-radius-block: 40px;
	--fs-radius-panel: 32px;
	--fs-radius-card: 28px;
	--fs-radius-swatch: 24px;
	--fs-radius-inner: 20px;
	--fs-radius-box: 18px;
	--fs-radius-node: 16px;
	--fs-radius-input: 14px;
	--fs-radius-small: 12px;
	--fs-radius-pill: 999px;

	/* Borders and shadows */
	--fs-border: 2px solid var(--fs-navy);
	--fs-border-dashed: 2px dashed var(--fs-navy);
	--fs-hairline: 1px solid var(--fs-line);
	--fs-shadow-table: 8px 8px 0 var(--fs-navy);
	--fs-shadow-card: 6px 6px 0 var(--fs-navy);
	--fs-shadow-panel: 5px 5px 0 var(--fs-navy);
	--fs-shadow-small: 4px 4px 0 var(--fs-navy);
	--fs-shadow-hover: 4px 4px 0 var(--fs-navy);
	--fs-ring: 0 0 0 4px var(--fs-lavender);   /* input focus ring */
	--fs-artboard-shadow: 0 2px 24px rgba(21, 7, 53, .08);

	/* Layout */
	--fs-container: 1240px;
	--fs-gutter: 100px;          /* page edge to container at 1440 */
	--fs-block-inset: 40px;      /* colour block inset from the viewport edge */
	--fs-block-pad-x: 60px;
	--fs-gap: 32px;              /* 12-column grid gap */

	/* Controls */
	--fs-btn-h: 54px;
	--fs-btn-h-sm: 52px;
	--fs-btn-h-nav: 48px;
	--fs-btn-h-lg: 58px;
	--fs-btn-h-mobile: 56px;
	--fs-input-h: 52px;
	--fs-target: 44px;           /* minimum touch target */

	/* Spacing steps used by the artboards */
	--fs-space-4: 4px;
	--fs-space-8: 8px;
	--fs-space-10: 10px;
	--fs-space-12: 12px;
	--fs-space-14: 14px;
	--fs-space-16: 16px;
	--fs-space-20: 20px;
	--fs-space-24: 24px;
	--fs-space-28: 28px;
	--fs-space-32: 32px;
	--fs-space-40: 40px;
	--fs-space-48: 48px;
	--fs-space-56: 56px;
	--fs-space-64: 64px;
	--fs-space-72: 72px;
	--fs-space-80: 80px;
	--fs-space-88: 88px;
	--fs-space-96: 96px;
	--fs-space-112: 112px;
}

@media (max-width: 690px) {
	:root {
		/* Mobile type (brand sheet: Display 40, H2 32, H3 20, Lead 17, Body 16) */
		--fs-display: 40px;
		--fs-display-lh: 1.04;   /* Home mobile hero */
		--fs-h1: 40px;
		--fs-h2: 32px;
		--fs-h3: 20px;
		--fs-lead: 17px;
		--fs-lead-lh: 1.55;
		--fs-body: 16px;
		--fs-eyebrow: 14px;

		--fs-radius-block: 28px;
		--fs-radius-card: 22px;
		--fs-block-inset: 12px;
		--fs-block-pad-x: 20px;
		--fs-gutter: 20px;
	}
}