/* The single source of truth. The only file in the theme allowed a raw value. */

:root {
	/* ---- Brand colour: the logo's ink and the live site's grey grounds ---- */
	--tst-ink: #1d1d1b;            /* the octagon */
	--tst-ink-dark: #000;
	--tst-charcoal: #2f2f2d;       /* body copy */
	--tst-muted: #575753;          /* darkened from the live #8e8e8e to clear AA on mist */
	--tst-slate: #575754;          /* footer ground; live #777 failed AA under white text */
	--tst-mist: #e2e1de;           /* page ground, live #dfdfdf warmed toward the logo grey */
	--tst-paper: #f6f5f3;          /* title band */
	--tst-white: #fff;
	--tst-rule: #cfcec9;
	--tst-rule-control: #76756f;   /* 3:1 on every ground (3.5 on mist) for outlined controls */
	--tst-logo-type: #f2f1ee;      /* the lettering inside the octagon */

	--tst-ink-rgb: 29 29 27;

	/* ---- Semantic colour ---- */
	--color-bg: var(--tst-mist);
	--color-bg-band: var(--tst-paper);
	--color-bg-card: var(--tst-white);
	--color-bg-inverse: var(--tst-slate);
	--color-text: var(--tst-charcoal);
	--color-text-muted: var(--tst-muted);
	--color-heading: var(--tst-ink);
	--color-link: var(--tst-ink);
	--color-link-hover: var(--tst-ink-dark);
	--color-border: var(--tst-rule);
	--color-border-control: var(--tst-rule-control);
	--color-btn: var(--tst-ink);
	--color-btn-hover: var(--tst-ink-dark);
	--color-on-btn: var(--tst-white);
	--color-scrim: rgb(var(--tst-ink-rgb) / 0.55);

	/* ---- Type ---- */
	--font-display: 'Prata', 'Times New Roman', Georgia, serif;
	--font-text: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

	/* Prata ships one weight; Poppins is served at these four only. */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semi: 600;
	--weight-display: 400;

	--font-1: 0.8125rem;                                    /* 13         labels, eyebrows */
	--font-2: 0.875rem;                                     /* 14         small print, meta */
	--font-3: 0.9375rem;                                    /* 15         buttons, nav */
	--font-4: 1.0625rem;                                    /* 17         body */
	--font-5: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19 -> 22   lede, card titles */
	--font-6: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);    /* 22 -> 28   h3, price */
	--font-7: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);       /* 28 -> 40   h2 */
	--font-8: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);      /* 34 -> 56   page title */
	--font-9: clamp(2.375rem, 1.7rem + 3vw, 4rem);          /* 38 -> 64   hero */

	--leading: 1.65;
	--leading-snug: 1.4;
	--leading-heading: 1.15;
	--tracking-display: -0.005em;
	--tracking-label: 0.12em;

	/* ---- Space: N x 8px ---- */
	--space-05: 0.25rem;
	--space-1: 0.5rem;
	--space-15: 0.75rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 2.5rem;
	--space-6: 3rem;
	--space-8: 4rem;
	--space-10: 5rem;
	--space-12: 6rem;

	/* ---- Layout ---- */
	--container: 1200px;
	--container-narrow: 760px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--section-y: clamp(var(--space-5), 6vw, var(--space-10));
	--section-y-tight: clamp(var(--space-3), 4vw, var(--space-6));
	--measure: 68ch;
	--masthead-height: 5.5rem;
	--masthead-logo: 4.5rem;
	--grid-gap: clamp(var(--space-2), 2.5vw, var(--space-4));

	/* ---- Shape ---- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;
	--border-hairline: 1px;
	--shadow-card: 0 1px 2px rgb(var(--tst-ink-rgb) / 0.06), 0 6px 18px rgb(var(--tst-ink-rgb) / 0.06);

	/* ---- Focus ---- */
	--focus-width: 2px;
	--focus-offset: 3px;
	--focus-color: var(--tst-ink);
	--focus-color-inverse: var(--tst-white);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--duration: 200ms;
	--duration-slow: 400ms;

	/* ---- Stacking ---- */
	--z-masthead: 50;
	--z-drawer: 60;
	--z-dialog: 80;
}

/* Flips a whole section onto the slate ground. The color declaration is not redundant: body's
   colour was computed before the token changed, so descendants would keep the old ink. */
.is-inverse {
	--focus-color: var(--focus-color-inverse);
	--color-text: var(--tst-white);
	--color-text-muted: var(--tst-paper);
	--color-heading: var(--tst-white);
	--color-link: var(--tst-white);
	--color-link-hover: var(--tst-white);
	--color-border: rgb(255 255 255 / 0.28);
	--color-btn: var(--tst-white);
	--color-btn-hover: var(--tst-paper);
	--color-on-btn: var(--tst-ink);

	color: var(--color-text);
	background-color: var(--color-bg-inverse);
}