/*
 * Design tokens (W2-TR-01). The only file in the theme that holds colour values; theme.json's palette repeats the
 * same five for the block editor, and scripts/theme/check-colours.sh fails if the two ever differ or if a colour is
 * written anywhere else.
 */
:root {
	/* Palette */
	--cc-ink: #000000;
	--cc-grey-600: #6b6b6b;
	--cc-grey-500: #8a8a8a;
	--cc-grey-200: #e5e5e5;
	--cc-white: #ffffff;
	--cc-sale: #0f743b;   /* sale prices only, as on today's site (owner, 2026-10-18); 5.9:1 on white */
	--cc-badge: #e60000;  /* the SALE badge on product pages, and a saved product's heart (owner, 2026-10-18); 4.8:1 */

	/* Type */
	--cc-font-heading: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--cc-font-body: Mulish, "Helvetica Neue", Arial, sans-serif;
	--cc-size-label: 0.75rem;   /* 12px */
	--cc-size-small: 0.875rem;  /* 14px */
	--cc-size-card: 0.9375rem;  /* 15px */
	--cc-size-body: 1rem;       /* 16px */
	--cc-size-h4: 1.125rem;     /* 18px */
	--cc-size-h3: 1.25rem;      /* 20px */
	--cc-size-h2: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);  /* 24px to 28px */
	--cc-size-h1: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);     /* 32px to 40px */
	--cc-size-display: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); /* 34px to 56px: the home page heading */
	--cc-size-post: 1.125rem;          /* 18px: the text of a post */
	--cc-size-page: 1.0625rem;         /* 17px: the text of a text page (terms, about) */
	--cc-size-content-h2: 1.5rem;      /* 24px: headings inside posts and pages, a step below page titles */
	--cc-size-content-h3: 1.25rem;     /* 20px */
	--cc-size-content-h4: 1.0625rem;   /* 17px, bold */
	--cc-line-body: 1.6;
	--cc-line-reading: 1.7;            /* posts and text pages */
	--cc-line-heading: 1.25;
	--cc-tracking-label: 0.08em;

	/* Space */
	--cc-space-1: 0.25rem;  /* 4px */
	--cc-space-2: 0.5rem;   /* 8px */
	--cc-space-3: 0.75rem;  /* 12px */
	--cc-space-4: 1rem;     /* 16px */
	--cc-space-5: 1.5rem;   /* 24px */
	--cc-space-6: 2rem;     /* 32px */
	--cc-space-7: 3rem;     /* 48px */
	--cc-space-8: 4rem;     /* 64px */

	/* Shape */
	--cc-radius: 2px;
	--cc-radius-pill: 999px;  /* the SALE badge only */
	--cc-line: 1px;
	--cc-line-strong: 2px;
	--cc-focus: 2px;
	--cc-control-height: 2.75rem;  /* 44px: a comfortable touch target */
	--cc-round-button: 2.5rem;     /* 40px: the round heart and arrow buttons on card pictures */

	/* Layout */
	--cc-content: 760px;  /* reading column */
	--cc-wide: 1200px;
	--cc-gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);

	/*
	 * GeneratePress colour names that older GenerateBlocks content still uses (P3-THM-01 step 6, counted on live
	 * 2026-10-17), mapped onto the palette by what they are used for.
	 */
	--contrast: var(--cc-ink);        /* 714 uses: shadows, backgrounds, text */
	--contrast-2: var(--cc-ink);      /* 21: dark backgrounds */
	--contrast-3: var(--cc-grey-600); /* 64: hover backgrounds, text */
	--contrast-4: var(--cc-grey-600); /* 31: light-grey text, darkened to pass contrast */
	--contrast-5: var(--cc-grey-200); /* 91: dividers, links on dark backgrounds */
	--base: var(--cc-grey-200);       /* 84: borders, link hover on dark backgrounds */
	--base-2: var(--cc-white);        /* 74: text and links on dark backgrounds */
	--education: var(--cc-ink);       /* 1: a border */
}

/* A dialog's shade (::backdrop, the sign-in panel's) inherits nothing from the page in older browsers, so it gets the
   token it uses here too. */
::backdrop {
	--cc-ink: #000000;
}

/* GenerateBlocks content: its "contained" sections take our page width, so they line up with everything else. */
html:root {
	--gb-container-width: var(--cc-wide);
}