Front-End CSS Tokens

render_header_scripts() loads a bundled system stylesheet (assets/css/synaptikCSS.php, combining the search overlay, shortcode, and gallery-layout CSS) on every page. That stylesheet is intentionally theme-agnostic — it reads its colors, spacing, and typography from CSS custom properties, which your theme's style.css is expected to define. Skipping them isn't a hard error; most fall back to a dark/green default, but a few genuinely need a real value from your theme to look right.

Core tokens (with fallback defaults)

Search overlay tokens (no fallback — define these yourself)

Unlike the tokens above, these have no built-in default — the search overlay (Ctrl+K) will still function without them, but its colors are left entirely up to whatever inherits from the surrounding page, which usually looks unstyled or mismatched:

--search-bg, --search-text, --search-accent, --search-accent-light, --search-accent-dark, --search-overlay-bg, --search-card-bg, --search-card-bg-hover, --search-checkbox-border, --search-radius, --search-section-heading.

:root {
    --search-bg: #1a1d1a;
    --search-text: #eee;
    --search-accent: var(--color-primary);
    --search-accent-light: var(--color-primary-light);
    --search-overlay-bg: rgba(10, 12, 10, .92);
    --search-card-bg: #23261f;
    --search-card-bg-hover: #2c3025;
    --search-radius: 8px;
}

Where to define them

Set these once, at :root level, in your theme's css/style.css — the same file you're already writing for everything else. There's no separate registration step; the system stylesheet simply reads whatever is in scope by the time it renders.