/**
 * palmo.xyz color system.
 *
 * Components consume semantic tokens, not hex-named swatches. The only
 * site-chrome red is --palmo-red. Syntax highlighting is intentionally
 * independent in highlight.css.
 */

:root,
html[data-theme="light"] {
	/* Brand constants */
	--palmo-red: #e22d30; /* darker — icons/text on light surfaces */
	--palmo-red-bright: #ff5a5d; /* lighter — icons/text on dark surfaces */
	--palmo-black: #000;
	--palmo-white: #fff;
	--palmo-chrome: #2a2a2a;
	--palmo-on-chrome: var(--palmo-white);
	--palmo-on-chrome-muted: #a0a0a0;

	/* Semantic light theme */
	--palmo-page: #f7f7f7;
	--palmo-surface: #fff;
	--palmo-raised: #f5f5f5;
	--palmo-hover: #ebebeb;
	--palmo-heading: #000;
	--palmo-body: #000;
	--palmo-muted: #666;
	--palmo-border: #ebebeb;
	--palmo-border-strong: #666;
	--palmo-link: var(--palmo-red);
	--palmo-link-hover: var(--palmo-red);
	--palmo-mark-bg: #fd5;
	--palmo-mark-text: var(--palmo-black);

	/* Inline/plain code; highlighted blocks own their palette */
	--palmo-code-bg: var(--palmo-raised);
	--palmo-code-border: var(--palmo-border);
	--palmo-code-inline: var(--palmo-red);
	--palmo-code-block: var(--palmo-body);

	/* Search-specific roles */
	--palmo-search-surface: var(--palmo-surface);
	--palmo-search-text: var(--palmo-body);
	--palmo-search-muted: var(--palmo-muted);
	--palmo-search-heading: var(--palmo-heading);
	--palmo-search-input-bg: var(--palmo-page);
	--palmo-search-input-border: color-mix(in srgb, var(--palmo-muted) 45%, transparent);
}

html[data-theme="dark"] {
	--palmo-page: #121212;
	--palmo-surface: #1a1a1a;
	--palmo-raised: #2a2a2a;
	--palmo-hover: #3a3a3a;
	--palmo-heading: #f0f0f0;
	--palmo-body: #e6e6e6;
	--palmo-muted: #a0a0a0;
	--palmo-border: #3a3a3a;
	--palmo-border-strong: #555;

	/*
	 * Brand red fails WCAG AA as normal text on dark surfaces.
	 * Resting links stay light; fine-pointer hover uses the bright red.
	 */
	--palmo-link: var(--palmo-heading);
	--palmo-link-hover: var(--palmo-red-bright);
	--palmo-mark-bg: #5c4a00;
	--palmo-mark-text: #fff3bf;

	--palmo-code-bg: var(--palmo-page);
	--palmo-code-border: var(--palmo-border);
	--palmo-code-inline: var(--palmo-body);
	--palmo-code-block: var(--palmo-body);

	--palmo-search-surface: var(--palmo-raised);
	--palmo-search-text: var(--palmo-white);
	--palmo-search-muted: rgba(255, 255, 255, .7);
	--palmo-search-heading: var(--palmo-white);
	--palmo-search-input-bg: rgba(255, 255, 255, .08);
	--palmo-search-input-border: rgba(255, 255, 255, .28);
}