/*
 * Design tokens of the output-canal child theme (spec 8.1).
 * Colours: only the brand swatches, always solid. Lime and light blue are small accents only
 * (8.1.1 lists where they may appear). Black #000000 and #0C0C0C are not interface colours.
 */
:root {
	/* Colour (8.1.1) */
	--oc-paper: #FFFEFA;
	--oc-white: #FFFFFF;
	--oc-mist: #F5F5F5;
	--oc-stone: #E0E0E0;
	--oc-foam: #D6D6D6;
	--oc-pencil: #6D6D6D;
	--oc-ink-2: #3D3D3D;
	--oc-ink: #1F1F1F;
	--oc-deep: #111111;
	--oc-lime: #D8F505;
	--oc-blue: #5FCFF0;

	/* Type families (8.1.2) */
	--oc-serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
	--oc-sans: "Work Sans", "Work Sans Fallback", Arial, sans-serif;

	/* Type scale (8.1.2) */
	--oc-fs-hero: clamp(50px, 9.8vw, 152px);
	--oc-fs-page: clamp(44px, 6.6vw, 96px);
	--oc-fs-entry: clamp(34px, 4.4vw, 60px);
	--oc-fs-h2: clamp(32px, 4.2vw, 58px);
	--oc-fs-h3: clamp(22px, 2vw, 26px);
	--oc-fs-card: 22px;
	--oc-fs-lede: clamp(26px, 2.6vw, 36px);
	--oc-fs-kicker: clamp(18px, 1.5vw, 21px);
	--oc-fs-tagline: clamp(20px, 1.75vw, 26px);
	--oc-fs-stat: clamp(40px, 4vw, 58px);
	--oc-fs-count: 19px;
	--oc-fs-body: 17px;
	--oc-fs-prose: 18px;
	--oc-fs-nav: 15px;
	--oc-fs-button: 14px;
	--oc-fs-meta: 14px;
	--oc-fs-tag: 13px;

	/* Spacing, 4 px base (8.1.4) */
	--oc-s-1: 4px;
	--oc-s-2: 8px;
	--oc-s-3: 12px;
	--oc-s-4: 16px;
	--oc-s-5: 24px;
	--oc-s-6: 32px;
	--oc-s-7: 48px;
	--oc-s-8: 64px;
	--oc-s-9: 96px;
	--oc-s-10: 128px;
	--oc-gut: clamp(16px, 4vw, 64px);
	--oc-section-y: clamp(64px, 9vw, 140px);
	--oc-w-content: 1200px;
	--oc-w-prose: 680px;
	--oc-w-wide: 960px;
	--oc-head-h: 72px;

	/* Lines (8.1.6) */
	--oc-line: 1.5px;
	--oc-rule: 1px solid var(--oc-stone);
	--oc-frame: var(--oc-line) solid var(--oc-ink);

	/* Waterline tile 40 x 12 (8.1.6): stroke #3D3D3D 1.2 px, #F5F5F5 below the curve */
	--oc-waterline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6Q10 1 20 6T40 6V12H0Z' fill='%23F5F5F5'/%3E%3Cpath d='M0 6Q10 1 20 6T40 6' fill='none' stroke='%233D3D3D' stroke-width='1.2'/%3E%3C/svg%3E");
	/* CSS water tile 160 x 28 (8.1.6): two wave lines, #6D6D6D at y 8 and #D6D6D6 at y 21 */
	--oc-sea-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28'%3E%3Cpath d='M0 8Q20 3 40 8T80 8T120 8T160 8' fill='none' stroke='%236D6D6D' stroke-width='1'/%3E%3Cpath d='M0 21Q20 17 40 21T80 21T120 21T160 21' fill='none' stroke='%23D6D6D6' stroke-width='1'/%3E%3C/svg%3E");
	--oc-sea: var(--oc-sea-tile) 0 0 / 160px 28px repeat, linear-gradient(180deg, var(--oc-paper), var(--oc-mist));

	/* Motion (8.2) */
	--oc-dur-press: 120ms;
	--oc-dur-hover: 200ms;
	--oc-dur-ring: 600ms;
	--oc-dur-fade: 800ms;
	--oc-dur-surface: 1200ms;
	--oc-ease-out: cubic-bezier(.22, 1, .36, 1);
	--oc-ease-float: linear(0, .1 5%, .36 12%, .66 20%, .9 29%, 1.04 37%, 1.1 45%, 1.09 52%, 1.04 61%, 1 72%, .99 84%, 1);

	/* Focus (8.1.7): 3 px paper gap, 2 px ink ring, 3 px light-blue halo */
	--oc-focus-ring: var(--oc-ink);
	--oc-focus-gap: var(--oc-paper);
}

@media (max-width: 760px) {
	:root {
		--oc-head-h: 62px;
		--oc-fs-body: 16px;
		--oc-fs-prose: 17px;
	}
}