/*
 * Chain Compounds design tokens (brand direction approved 2026-10-25, category palette A).
 *
 * Contrast ratios (WCAG 2.1 AA needs 4.5:1 for text, 3:1 for large text and UI parts):
 *   ink on paper                 17.3:1
 *   muted on paper                5.5:1
 *   orange-text on paper          5.0:1   orange text on light backgrounds (logo orange fails here)
 *   orange on ink                 6.0:1   orange text on dark backgrounds
 *   ink on orange                 6.0:1   orange buttons always use dark text
 *   muted-dark on ink             7.7:1
 *   pep-text / blend-text / sup-text on paper: 5.0 / 5.3 / 6.6:1
 *   pep-ink / blend-ink / sup-ink on ink: 7+ :1
 * The category fills (--cc-pep, --cc-blend, --cc-sup) are for caps, strips and dots, not small text.
 */

/* Geist and Geist Mono @font-face come from theme.json on the site (design pages declare their own). */

:root {
	/* Surfaces */
	--cc-paper: #F6F3EE;
	--cc-paper-2: #EFEAE2;
	--cc-white: #FFFFFF;
	--cc-surface: #FFFFFF;
	--cc-line: #E2DCD2;

	/* Ink and accent */
	--cc-ink: #0E0F10;
	--cc-ink-2: #17181A;
	--cc-ink-3: #222427;
	--cc-orange: #E2702A;
	--cc-orange-hover: #EC8343;
	--cc-orange-text: #A84D13;
	--cc-muted: #5F636A;
	--cc-muted-dark: #A0A4AB;
	--cc-line-dark: #2A2C2F;

	/* Older names kept so earlier styles keep working */
	--cc-gray-100: #F2EEE8;
	--cc-gray-200: var(--cc-line);
	--cc-gray-300: #D6CFC4;

	/* Category colors: fill (caps, strips, dots), text (on paper), soft (tint), ink (text on dark) */
	--cc-pep: #E2702A;   --cc-pep-text: #A84D13;   --cc-pep-soft: #FBE9DD;   --cc-pep-ink: #F0965C;
	--cc-blend: #1F8A84; --cc-blend-text: #17706B; --cc-blend-soft: #DDF0EE; --cc-blend-ink: #3DB8B0;
	--cc-sup: #5B6B7A;   --cc-sup-text: #4A5866;   --cc-sup-soft: #E4E8EC;   --cc-sup-ink: #9AAAB8;

	/* Type */
	--cc-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cc-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--cc-text-xs: 0.75rem;
	--cc-text-sm: 0.875rem;
	--cc-text-base: 1rem;
	--cc-text-lg: 1.125rem;
	--cc-text-xl: 1.5rem;
	--cc-text-2xl: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
	--cc-text-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.4rem);
	--cc-leading-tight: 1.0;
	--cc-leading-snug: 1.15;
	--cc-leading-body: 1.6;
	--cc-tracking-tight: -0.045em;
	--cc-tracking-label: 0.06em;

	/* Space and shape */
	--cc-gutter: 16px;
	--cc-max: 1200px;
	--cc-radius: 18px;
	--cc-radius-sm: 10px;
	--cc-tap: 44px;

	/* Motion: short and quiet */
	--cc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cc-fast: 160ms;
	--cc-medium: 420ms;
}

@media (min-width: 768px) {
	:root { --cc-gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --cc-fast: 0ms; --cc-medium: 0ms; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}