/*
 * Design tokens, transcribed from the Figma design-system page (node 666-11978).
 *
 * Spacing: the designer labelled these mb-50/mb-30/mb-10/mb-3. Treated as
 * literal pixel values (50px/30px/10px/3px) rather than Tailwind's default
 * 0.25rem-per-unit scale, because the Home - Launch pull already showed
 * literal gaps of 40px/30px/20px/10px/4px - a 120px "mb-30" never appears
 * anywhere in that markup. Confirm once spacing is visible on more pages.
 *
 * Color: #888888 shows up a lot as body-copy color in the Home - Launch
 * pull, but isn't one of the five tokens supplied here. Using C3C3C3 as
 * the canonical secondary text color going forward - flag if #888 was
 * actually intentional.
 */

:root {
	/* Color */
	--color-bg: #191919;
	--color-surface: #232323;
	--color-text: #dbdbdb;
	--color-text-secondary: #c3c3c3;
	--color-white: #ffffff;

	/* Spacing */
	--space-xs: 3px;
	--space-sm: 10px;
	--space-md: 30px;
	--space-lg: 50px;
	--space-xl: 80px;

	/* Type */
	--font-clarendon: 'Clarendon Wide', 'Times New Roman', serif;
	--font-cormorant: 'Cormorant Garamond', Georgia, serif;
	--font-mono: 'Azeret Mono', 'Courier New', monospace;

	--text-h1: 1.5rem; /* clarendon-text-2xl */
	--text-h2: 0.75rem; /* clarendon-text-xs */
	--text-h3: 1.125rem; /* clarendon-text-lg (interpolated, see typography.css note) */
	--text-h4: 1rem; /* cormorant-text-l */
	--text-h5: 1.375rem; /* cormorant-text-base */
	--text-body: 1rem; /* cormorant-text-sm */
	--text-mono: 0.75rem; /* azeret-text-mono */
	--text-tag: 1rem; /* cormorant-text-lg (mobile) */
}

@media (min-width: 768px) {
	:root {
		--text-h1: 2.5rem; /* clarendon-text-5xl */
		--text-h2: 1.75rem; /* clarendon-text-3xl */
		--text-h3: 1.25rem; /* clarendon-text-xl */
		--text-tag: 1.125rem; /* cormorant-text-lg (desktop) */
		/* h4, h5/body, mono are unchanged from mobile */
	}
}

.mb-3 {
	margin-bottom: var(--space-xs);
}

.mb-10 {
	margin-bottom: var(--space-sm);
}

.mb-30 {
	margin-bottom: var(--space-md);
}

.mb-50 {
	margin-bottom: var(--space-lg);
}

.mb-80 {
	margin-bottom: var(--space-xl);
}