/*
 * The Buy Brief design tokens. Every component reads from these; change the look here.
 * Lime = brand accent and primary actions (For Home). Ink = text, dark buttons and the
 * For Work accent. Evidence dots use neutral ink, never green or red (methodology 06).
 */

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* Handwritten annotations are decoration: never block rendering or shift layout for them. */
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2");
}

:root {
	/* Brand */
	--bb-lime: #d5f54b;
	--bb-lime-dark: #bfe02f;
	--bb-lime-tint: #f2fbcc;

	/* Neutrals */
	--bb-ink: #121212;
	--bb-ink-2: #3a3936;
	--bb-muted: #6d6a64;
	--bb-line: #e5e1d7;
	--bb-line-strong: #cdc7ba;
	--bb-bg: #f7f5ef;
	--bb-bg-2: #efebe1;
	--bb-surface: #ffffff;
	--bb-dark: #161616;
	--bb-dark-2: #242422;

	/* Evidence dots: neutral ink only */
	--bb-dot-on: #121212;
	--bb-dot-off: #d9d4c8;

	/* Accent follows the side: lime for Home, ink (with lime text) for Work */
	--bb-accent: var(--bb-lime);
	--bb-accent-dark: var(--bb-lime-dark);
	--bb-on-accent: var(--bb-ink);
	--bb-accent-tint: var(--bb-lime-tint);
	/* Accent for text and thin lines, which lime is too light for on off-white */
	--bb-accent-text: var(--bb-ink);

	/* Type */
	--bb-font-display: "Anton", "Impact", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
	--bb-font-serif: "DM Serif Display", "Georgia", "Times New Roman", serif;
	--bb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--bb-font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

	--bb-text-xs: 0.75rem;
	--bb-text-sm: 0.875rem;
	--bb-text-base: 1rem;
	--bb-text-md: 1.125rem;
	--bb-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--bb-text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	--bb-text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--bb-text-display: clamp(2.6rem, 1.8rem + 3.6vw, 4.75rem);
	--bb-text-hero: clamp(3.75rem, 2.2rem + 7vw, 8.5rem);
	--bb-score-xl: clamp(4rem, 3rem + 4vw, 6.5rem);

	--bb-leading-tight: 1.05;
	--bb-leading-snug: 1.3;
	--bb-leading: 1.6;

	/* Space */
	--bb-space-1: 0.25rem;
	--bb-space-2: 0.5rem;
	--bb-space-3: 0.75rem;
	--bb-space-4: 1rem;
	--bb-space-5: 1.5rem;
	--bb-space-6: 2rem;
	--bb-space-7: 3rem;
	--bb-space-8: 4.5rem;

	/* Shape */
	--bb-radius-sm: 6px;
	--bb-radius: 10px;
	--bb-radius-lg: 16px;
	--bb-radius-pill: 999px;
	--bb-shadow: 0 1px 2px rgb(18 18 18 / 5%), 0 8px 24px rgb(18 18 18 / 6%);
	--bb-container: 78rem;
	--bb-measure: 42rem;
	--bb-focus: 0 0 0 3px rgb(18 18 18 / 85%), 0 0 0 5px var(--bb-lime);
}

/* For Work sections switch the accent to ink with lime text. */
.bb-work {
	--bb-accent: var(--bb-ink);
	--bb-accent-dark: #000;
	--bb-on-accent: var(--bb-lime);
	--bb-accent-tint: #ecebe6;
	--bb-accent-text: var(--bb-ink);
}