/* Conffab refresh: semantic design tokens. */
:root {
	color-scheme: light;

	--cf-font-sans: "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--cf-font-display: "freight-big-pro", "Big Caslon", Palatino, Georgia, serif;
	--cf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--cf-canvas: #f6f3ec;
	--cf-canvas-raised: #fffdf8;
	--cf-surface: #ffffff;
	--cf-surface-subtle: #ece7dd;
	--cf-surface-strong: #ded6c8;
	--cf-ink: #1d1830;
	--cf-ink-soft: #554e68;
	--cf-ink-faint: #746d82;
	--cf-border: #d8d0c3;
	--cf-border-strong: #aaa0b6;
	--cf-brand: #6547d7;
	--cf-brand-strong: #4b2db6;
	--cf-brand-soft: #e6dfff;
	--cf-accent: #c73f8e;
	--cf-accent-soft: #f8dced;
	--cf-positive: #18734a;
	--cf-warning: #9a5c00;
	--cf-focus: #0a66d8;
	--cf-on-brand: #ffffff;
	--cf-code-bg: #211a32;
	--cf-code-ink: #f4eef8;
	--cf-code-border: #5c4e73;
	--cf-inline-code-bg: #e6dfff;
	--cf-inline-code-ink: #4b2db6;
	--cf-inline-code-border: #c5b8f4;
	--cf-header: color-mix(in srgb, var(--cf-canvas-raised) 92%, transparent);
	--cf-scrim: rgba(20, 14, 41, 0.72);
	--cf-media-scrim: linear-gradient(180deg, transparent 35%, rgba(15, 10, 31, 0.9) 100%);
	--cf-logo-field: linear-gradient(145deg, #514663, #786a84);
	--cf-logo-field-ink: #ffffff;

	--cf-shadow-sm: 0 1px 2px rgba(34, 24, 52, 0.08), 0 6px 18px rgba(34, 24, 52, 0.06);
	--cf-shadow-md: 0 18px 50px rgba(34, 24, 52, 0.13);
	--cf-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--cf-focus) 25%, transparent);

	--cf-radius-sm: 0.4rem;
	--cf-radius-md: 0.8rem;
	--cf-radius-lg: 1.3rem;
	--cf-radius-pill: 999px;
	--cf-border-width: 1px;
	--cf-card-border-width: 3px;
	--cf-card-border-color: #978ca5;
	--cf-card-border-hover: var(--cf-brand);
	--cf-control-border-width: 2px;
	--cf-icon-button-bg: var(--cf-brand-strong);
	--cf-icon-button-border: var(--cf-brand-strong);
	--cf-icon-button-ink: #ffffff;
	--cf-icon-button-size: 2.7rem;
	--cf-icon-size: 1.15rem;
	--cf-control-height: 2.75rem;

	--cf-space-1: 0.35rem;
	--cf-space-2: 0.65rem;
	--cf-space-3: 1rem;
	--cf-space-4: 1.5rem;
	--cf-space-5: 2.25rem;
	--cf-space-6: 3.5rem;
	--cf-space-7: 5.25rem;
	--cf-space-8: 8rem;
	--cf-content: 76rem;
	--cf-reading: 46rem;
	--cf-header-height: 4.75rem;
	--cf-transition: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Compatibility aliases used by existing templates and plugins. */
	--body-background-color: var(--cf-canvas);
	--body-background-highlight: var(--cf-surface-subtle);
	--body-background-dark-tint: var(--cf-surface-strong);
	--body-background-gradient: none;
	--body-background-gradient-narrow: none;
	--body-text-color: var(--cf-ink);
	--body-text-reverse-color: var(--cf-canvas);
	--body-link-color: var(--cf-brand-strong);
	--body-button-bg-color: var(--cf-brand);
	--body-button-border-color: var(--cf-brand);
	--body-button-bg-hover-color: var(--cf-brand-strong);
	--body-button-text-color: var(--cf-on-brand);
	--body-highlight-color: var(--cf-surface-subtle);
	--body-subtle-highlight-color: var(--cf-surface-subtle);
	--body-dark-highlight-color: var(--cf-border-strong);
	--body-bright-highlight-color: var(--cf-surface);
	--body-accent-color: var(--cf-accent);
	--header-background-color: var(--cf-header);
	--body-font: var(--cf-font-sans);
	--logo-font: var(--cf-font-display);
	--heading-font: var(--cf-font-sans);
	--headline-font-size: clamp(2.25rem, 5vw, 4.25rem);
	--font-size-normal: 1rem;
	--font-weight-normal: 500;
	--font-weight-heavy: 700;
	--highlighted-text-color: var(--cf-brand);
	--highlight: var(--cf-brand);
	--highlight-glow: color-mix(in srgb, var(--cf-focus) 28%, transparent);
	--highlight-box-shadow: var(--cf-shadow-focus);
	--body-main-button-bg-gradient: linear-gradient(135deg, var(--cf-brand), var(--cf-brand-strong));
	--conference-border-radius: var(--cf-radius-md);
	--border-thickness-thin: 1px;
	--card-background-color: var(--cf-surface);
	--card-border-color: var(--cf-card-border-color);
	--card-border-color-highlighted: var(--cf-card-border-hover);
}

:root[data-color-mode="dark"] {
	color-scheme: dark;
	--cf-canvas: #161124;
	--cf-canvas-raised: #1d1730;
	--cf-surface: #241d39;
	--cf-surface-subtle: #2f2746;
	--cf-surface-strong: #3d3357;
	--cf-ink: #eee8f4;
	--cf-ink-soft: #d8cfdf;
	--cf-ink-faint: #b9afc4;
	--cf-border: #403651;
	--cf-border-strong: #665a78;
	--cf-brand: #aa91ff;
	--cf-brand-strong: #c2b1ff;
	--cf-brand-soft: #392d61;
	--cf-accent: #ff80c4;
	--cf-accent-soft: #4c2342;
	--cf-positive: #67d49c;
	--cf-warning: #ffc45c;
	--cf-focus: #8bc6ff;
	--cf-on-brand: #171022;
	--cf-code-bg: #100d19;
	--cf-code-ink: #f4eef8;
	--cf-code-border: #514367;
	--cf-inline-code-bg: #3d3357;
	--cf-inline-code-ink: #eee8f4;
	--cf-inline-code-border: #665a78;
	--cf-header: color-mix(in srgb, var(--cf-canvas-raised) 90%, transparent);
	--cf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.18);
	--cf-shadow-md: 0 22px 60px rgba(0, 0, 0, 0.34);
	--cf-card-border-width: 2px;
	--cf-card-border-color: var(--cf-border-strong);
	--cf-icon-button-bg: var(--cf-surface-strong);
	--cf-icon-button-border: var(--cf-border-strong);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-mode]) {
		color-scheme: dark;
		--cf-canvas: #161124;
		--cf-canvas-raised: #1d1730;
		--cf-surface: #241d39;
		--cf-surface-subtle: #2f2746;
		--cf-surface-strong: #3d3357;
		--cf-ink: #eee8f4;
		--cf-ink-soft: #d8cfdf;
		--cf-ink-faint: #b9afc4;
		--cf-border: #403651;
		--cf-border-strong: #665a78;
		--cf-brand: #aa91ff;
		--cf-brand-strong: #c2b1ff;
		--cf-brand-soft: #392d61;
		--cf-accent: #ff80c4;
		--cf-accent-soft: #4c2342;
		--cf-on-brand: #171022;
		--cf-code-bg: #100d19;
		--cf-code-ink: #f4eef8;
		--cf-code-border: #514367;
		--cf-inline-code-bg: #3d3357;
		--cf-inline-code-ink: #eee8f4;
		--cf-inline-code-border: #665a78;
		--cf-card-border-width: 2px;
		--cf-card-border-color: var(--cf-border-strong);
		--cf-icon-button-bg: var(--cf-surface-strong);
		--cf-icon-button-border: var(--cf-border-strong);
	}
}

::selection {
	background: var(--cf-brand-soft);
	color: var(--cf-ink);
}