/**
 * Folio — design tokens.
 *
 * Raw values (--folio-light-*, --folio-dark-*, --folio-font-*, base size,
 * scale, density, widths, radius …) are printed inline after this file from
 * the Customizer settings in inc/options.php. This file turns them into the
 * semantic tokens every component uses. It is loaded on the front end and in
 * the block editor, so both always match.
 *
 * Components must only use the semantic tokens (--folio-color-*, --folio-fs-*,
 * --folio-space-*, --folio-radius*, …), never the raw --folio-light-* /
 * --folio-dark-* values.
 */

:root {
	/* ---- Raw values: fallbacks only, overridden by the inline Customizer output. */
	--folio-light-bg: #fbfaf8;
	--folio-light-surface: #f3f0ea;
	--folio-light-text: #1c1a17;
	--folio-light-muted: #6b655c;
	--folio-light-accent: #b4492d;
	--folio-light-accent-text: #ffffff;
	--folio-light-border: #e4ded4;

	--folio-dark-bg: #161412;
	--folio-dark-surface: #211e1b;
	--folio-dark-text: #ede8e1;
	--folio-dark-muted: #a39b90;
	--folio-dark-accent: #e2856a;
	--folio-dark-accent-text: #1a0f0b;
	--folio-dark-border: #36302a;

	--folio-font-heading: Georgia, "Times New Roman", serif;
	--folio-font-body: Georgia, "Times New Roman", serif;
	--folio-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--folio-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--folio-font-size-base: 1.125rem;
	--folio-type-scale: 1.25;
	--folio-line-height: 1.65;
	--folio-heading-weight: 500;
	--folio-heading-tracking: -0.01em;

	--folio-density: 1;
	--folio-content-width: 700px;
	--folio-wide-width: 1200px;

	--folio-radius: 6px;
	--folio-radius-button: var(--folio-radius);
	--folio-border-width: 1px;
	--folio-grid-columns: 3;

	/* ---- Semantic colors (light). */
	--folio-color-bg: var(--folio-light-bg);
	--folio-color-surface: var(--folio-light-surface);
	--folio-color-text: var(--folio-light-text);
	--folio-color-muted: var(--folio-light-muted);
	--folio-color-accent: var(--folio-light-accent);
	--folio-color-accent-text: var(--folio-light-accent-text);
	--folio-color-border: var(--folio-light-border);
	color-scheme: light;

	/* ---- Derived colors. */
	--folio-color-accent-soft: color-mix(in srgb, var(--folio-color-accent) 12%, var(--folio-color-bg));
	--folio-color-accent-hover: color-mix(in srgb, var(--folio-color-accent) 82%, var(--folio-color-text));
	--folio-color-border-strong: color-mix(in srgb, var(--folio-color-border) 55%, var(--folio-color-text));
	--folio-color-header-bg: color-mix(in srgb, var(--folio-color-bg) 88%, transparent);
	--folio-color-backdrop: color-mix(in srgb, var(--folio-color-text) 45%, transparent);
	--folio-color-focus: var(--folio-color-accent);
	--folio-color-selection: color-mix(in srgb, var(--folio-color-accent) 28%, var(--folio-color-bg));

	/* ---- Shadows (tinted by the text color so they work in both schemes). */
	--folio-shadow-sm: 0 1px 2px color-mix(in srgb, var(--folio-color-text) 7%, transparent);
	--folio-shadow-md: 0 1px 2px color-mix(in srgb, var(--folio-color-text) 6%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--folio-color-text) 16%, transparent);
	--folio-shadow-lg: 0 2px 4px color-mix(in srgb, var(--folio-color-text) 6%, transparent), 0 18px 48px -12px color-mix(in srgb, var(--folio-color-text) 26%, transparent);

	/* ---- Type scale. Headings step by --folio-scale; small sizes do not. */
	--folio-scale: var(--folio-type-scale);
	--folio-fs-base: var(--folio-font-size-base);
	--folio-fs-xs: max(0.75rem, calc(var(--folio-fs-base) * 0.78));
	--folio-fs-sm: max(0.8125rem, calc(var(--folio-fs-base) * 0.89));
	--folio-fs-md: calc(var(--folio-fs-base) * (1 + (var(--folio-scale) - 1) * 0.5));
	--folio-fs-lg: calc(var(--folio-fs-base) * var(--folio-scale));
	--folio-fs-xl: calc(var(--folio-fs-lg) * var(--folio-scale));
	--folio-fs-2xl: min(calc(var(--folio-fs-xl) * var(--folio-scale)), 9vw);
	--folio-fs-3xl: min(calc(var(--folio-fs-xl) * var(--folio-scale) * var(--folio-scale)), 10.5vw);
	--folio-fs-4xl: min(calc(var(--folio-fs-xl) * var(--folio-scale) * var(--folio-scale) * var(--folio-scale)), 12vw);

	--folio-lh-body: var(--folio-line-height);
	--folio-lh-heading: 1.15;
	--folio-lh-snug: 1.3;
	--folio-lh-ui: 1.4;

	--folio-fw-body: 400;
	--folio-fw-heading: var(--folio-heading-weight);
	--folio-fw-ui: 500;
	--folio-fw-strong: 600;

	--folio-tracking-heading: var(--folio-heading-tracking);
	--folio-tracking-ui: 0;

	/* ---- Spacing. Everything scales with --folio-density. */
	--folio-space-3xs: calc(0.25rem * var(--folio-density));
	--folio-space-2xs: calc(0.5rem * var(--folio-density));
	--folio-space-xs: calc(0.75rem * var(--folio-density));
	--folio-space-sm: calc(1rem * var(--folio-density));
	--folio-space-md: calc(1.5rem * var(--folio-density));
	--folio-space-lg: calc(2rem * var(--folio-density));
	--folio-space-xl: calc(3rem * var(--folio-density));
	--folio-space-2xl: calc(4rem * var(--folio-density));
	--folio-space-3xl: calc(6rem * var(--folio-density));

	/* Vertical rhythm inside post content; em-based so it follows the text size. */
	--folio-flow: calc(1.15em * (0.6 + 0.4 * var(--folio-density)));
	/* Side padding of the page. Never below 1rem on phones. */
	--folio-gutter: clamp(1rem, calc(4.5vw * var(--folio-density)), calc(2.5rem * var(--folio-density)));

	/* ---- Widths. */
	--folio-measure: var(--folio-content-width);
	--folio-sidebar-width: clamp(15rem, 26%, 20rem);

	/* ---- Shape. */
	--folio-radius-sm: calc(var(--folio-radius) * 0.6);
	--folio-radius-lg: calc(var(--folio-radius) * 1.5);
	--folio-radius-pill: 999px;
	--folio-border: var(--folio-border-width) solid var(--folio-color-border);

	/* ---- Motion & layers. */
	--folio-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--folio-duration: 180ms;
	--folio-header-offset: 0px;
	--folio-admin-bar: 0px;
	--folio-z-header: 100;
	--folio-z-progress: 110;
	--folio-z-modal: 1000;
}

/* ---- Dark scheme: forced by the site setting, or chosen by the visitor. */
:root[data-folio-scheme="dark"],
:root[data-theme="dark"] {
	--folio-color-bg: var(--folio-dark-bg);
	--folio-color-surface: var(--folio-dark-surface);
	--folio-color-text: var(--folio-dark-text);
	--folio-color-muted: var(--folio-dark-muted);
	--folio-color-accent: var(--folio-dark-accent);
	--folio-color-accent-text: var(--folio-dark-accent-text);
	--folio-color-border: var(--folio-dark-border);
	color-scheme: dark;
}

/* ---- Dark scheme: following the system preference. */
@media (prefers-color-scheme: dark) {
	:root[data-folio-scheme="auto"]:not([data-theme="light"]),
	:root[data-folio-scheme="toggle"]:not([data-theme="light"]) {
		--folio-color-bg: var(--folio-dark-bg);
		--folio-color-surface: var(--folio-dark-surface);
		--folio-color-text: var(--folio-dark-text);
		--folio-color-muted: var(--folio-dark-muted);
		--folio-color-accent: var(--folio-dark-accent);
		--folio-color-accent-text: var(--folio-dark-accent-text);
		--folio-color-border: var(--folio-dark-border);
		color-scheme: dark;
	}
}

/* ---- Smaller heading steps on narrow screens. */
@media (max-width: 47.99em) {
	:root {
		--folio-scale: calc(1 + (var(--folio-type-scale) - 1) * 0.65);
	}
}

/* ---- Interface labels in uppercase. */
.folio-ui-uppercase {
	--folio-tracking-ui: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--folio-duration: 0ms;
	}
}