/**
 * CatHive design tokens: self-hosted fonts, colour palette, type scale.
 * Source: HANDOVER.md §1.1 (colour), §1.2 (type). Loaded before style.css.
 */

/* Fonts — self-hosted, no external CDN requests.
   Inter and Space Grotesk ship from Google Fonts as variable fonts (single
   file covers the weight range below); IBM Plex Mono ships static. */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
	/* Colour — HANDOVER.md §1.1 */
	--ch-ink: #11201D;
	--ch-ink-surface: #1C2E2A;
	--ch-mist-dark: #2A3B36;
	--ch-catalyst: #12B981;
	--ch-catalyst-deep: #0C9A6E;
	--ch-catalyst-bright: #1ECB95;
	--ch-catalyst-bright-alt: #19CD93;
	--ch-signal-amber: #F4A007;
	--ch-frost: #F2F5F2;
	--ch-off-white: #F4F6F4;
	--ch-cloud: #FFFFFF;
	--ch-mist-light: #E2E7E4;
	--ch-slate: #51625C;
	--ch-slate-on-dark: #9FB2AA;
	--ch-plate-yellow: #FBD30B;
	--ch-plate-yellow-border: #E4BC00;

	/* Semantic aliases, so templates don't hard-code raw tokens */
	--ch-surface-page: var(--ch-off-white);
	--ch-surface-card: var(--ch-cloud);
	--ch-surface-dark: var(--ch-ink);
	--ch-surface-dark-card: var(--ch-ink-surface);
	--ch-border-light: var(--ch-mist-light);
	--ch-border-dark: var(--ch-mist-dark);
	--ch-text-body: var(--ch-ink);
	--ch-text-secondary: var(--ch-slate);
	--ch-text-secondary-on-dark: var(--ch-slate-on-dark);
	--ch-text-on-dark: var(--ch-frost);
	/* Green for text/links on light backgrounds — #12B981 fails contrast here, see §1.1 */
	--ch-link-on-light: var(--ch-catalyst-deep);
	--ch-link-on-dark: var(--ch-catalyst);
	--ch-focus-ring-on-dark: var(--ch-catalyst);
	--ch-focus-ring-on-light: var(--ch-ink);

	/* Type — HANDOVER.md §1.2 */
	--ch-font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
	--ch-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ch-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

	/* Fluid type scale (clamp: min, preferred, max). Roles per §1.2/§1.4. */
	--ch-step-body: 1rem;               /* body copy, form controls */
	--ch-step-small: 0.875rem;          /* metadata, captions, chips */
	--ch-step-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--ch-step-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
	--ch-step-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
	--ch-step-hero: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);

	/* Headline tracking, large sizes only (§1.2) */
	--ch-tracking-display: -0.02em;
	--ch-tracking-display-hero: -0.025em;

	/* Spacing scale (8px base) */
	--ch-space-1: 0.5rem;
	--ch-space-2: 1rem;
	--ch-space-3: 1.5rem;
	--ch-space-4: 2rem;
	--ch-space-5: 3rem;
	--ch-space-6: 4.5rem;
	--ch-space-7: 6rem;

	--ch-radius: 8px;
	--ch-max-width: 80rem;
}

/* Reduced motion respected globally (§1.5) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visible keyboard focus: Catalyst outline on Ink, Ink outline on light (§1.5) */
:root {
	--ch-focus-ring: var(--ch-focus-ring-on-light);
}

.ch-on-dark {
	--ch-focus-ring: var(--ch-focus-ring-on-dark);
}

:focus-visible {
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 2px;
}

/* Honeycomb "whisper" texture (§1.3.7) — thin-stroke hex outline grid at
   low opacity, for heroes/section breaks only, never loud wallpaper.
   Seamless tessellating tile generated programmatically (flat-top hex,
   R=48 SVG units) and verified visually before use — do not hand-edit
   the polygon coordinates without re-verifying the tiling stays seamless. */
.ch-hex-bg {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20144.00%2083.14%22%3E%3Cpolygon%20points%3D%22-24.00%2C-41.57%20-48.00%2C0.00%20-96.00%2C0.00%20-120.00%2C-41.57%20-96.00%2C-83.14%20-48.00%2C-83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22-24.00%2C41.57%20-48.00%2C83.14%20-96.00%2C83.14%20-120.00%2C41.57%20-96.00%2C0.00%20-48.00%2C0.00%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22-24.00%2C124.71%20-48.00%2C166.28%20-96.00%2C166.28%20-120.00%2C124.71%20-96.00%2C83.14%20-48.00%2C83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%2248.00%2C-83.14%2024.00%2C-41.57%20-24.00%2C-41.57%20-48.00%2C-83.14%20-24.00%2C-124.71%2024.00%2C-124.71%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%2248.00%2C0.00%2024.00%2C41.57%20-24.00%2C41.57%20-48.00%2C0.00%20-24.00%2C-41.57%2024.00%2C-41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%2248.00%2C83.14%2024.00%2C124.71%20-24.00%2C124.71%20-48.00%2C83.14%20-24.00%2C41.57%2024.00%2C41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%2248.00%2C166.28%2024.00%2C207.85%20-24.00%2C207.85%20-48.00%2C166.28%20-24.00%2C124.71%2024.00%2C124.71%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22120.00%2C-41.57%2096.00%2C0.00%2048.00%2C0.00%2024.00%2C-41.57%2048.00%2C-83.14%2096.00%2C-83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22120.00%2C41.57%2096.00%2C83.14%2048.00%2C83.14%2024.00%2C41.57%2048.00%2C0.00%2096.00%2C0.00%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22120.00%2C124.71%2096.00%2C166.28%2048.00%2C166.28%2024.00%2C124.71%2048.00%2C83.14%2096.00%2C83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22192.00%2C-83.14%20168.00%2C-41.57%20120.00%2C-41.57%2096.00%2C-83.14%20120.00%2C-124.71%20168.00%2C-124.71%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22192.00%2C0.00%20168.00%2C41.57%20120.00%2C41.57%2096.00%2C0.00%20120.00%2C-41.57%20168.00%2C-41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22192.00%2C83.14%20168.00%2C124.71%20120.00%2C124.71%2096.00%2C83.14%20120.00%2C41.57%20168.00%2C41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22192.00%2C166.28%20168.00%2C207.85%20120.00%2C207.85%2096.00%2C166.28%20120.00%2C124.71%20168.00%2C124.71%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22264.00%2C-41.57%20240.00%2C0.00%20192.00%2C0.00%20168.00%2C-41.57%20192.00%2C-83.14%20240.00%2C-83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22264.00%2C41.57%20240.00%2C83.14%20192.00%2C83.14%20168.00%2C41.57%20192.00%2C0.00%20240.00%2C0.00%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3Cpolygon%20points%3D%22264.00%2C124.71%20240.00%2C166.28%20192.00%2C166.28%20168.00%2C124.71%20192.00%2C83.14%20240.00%2C83.14%22%20fill%3D%22none%22%20stroke%3D%22%23F2F5F2%22%20stroke-opacity%3D%220.08%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E");
	background-size: 144px 83.14px;
	background-repeat: repeat;
}