/*
 * 20 — Directorist, restyled through its own custom properties so we never fight its selectors.
 * Declared on body, not :root: Directorist prints its :root block after our stylesheet, and its
 * derived variables (btn, btn-hover…) resolve at :root, so each one is re-pointed here too.
 * Phase 3 builds the real listing layout; this only brings Directorist onto the palette.
 */

body {
	--directorist-color-primary: var(--wp--preset--color--clay);
	--directorist-color-primary-rgb: var(--wp--custom--directorist--clay-rgb);
	--directorist-color-dark: var(--wp--preset--color--ink);
	--directorist-color-dark-rgb: var(--wp--custom--directorist--ink-rgb);
	--directorist-color-body: var(--wp--preset--color--ink);
	--directorist-color-light-gray: var(--wp--preset--color--stone);
	--directorist-color-deep-gray: var(--wp--preset--color--stone);
	--directorist-color-placeholder: var(--wp--preset--color--stone);
	--directorist-color-border: var(--wp--preset--color--line);
	--directorist-color-border-gray: var(--wp--preset--color--line);
	--directorist-color-border-light: var(--wp--preset--color--line);
	--directorist-color-bg-gray: var(--wp--preset--color--paper-deep);
	--directorist-color-bg-light-gray: var(--wp--preset--color--paper-deep);
	--directorist-color-bg-light: var(--wp--preset--color--paper-deep);
	--directorist-color-light: var(--wp--preset--color--paper-deep);
	--directorist-color-secondary: var(--wp--preset--color--paper-deep);
	--directorist-color-white: var(--wp--preset--color--paper);
	--directorist-color-btn: var(--wp--preset--color--clay);
	--directorist-color-btn-border: var(--wp--preset--color--clay);
	--directorist-color-btn-hover: var(--wp--preset--color--clay-deep);
	--directorist-color-btn-primary: var(--wp--preset--color--paper);
	--directorist-color-btn-primary-bg: var(--wp--preset--color--clay);
	--directorist-color-btn-primary-border: var(--wp--preset--color--clay);
	--directorist-color-btn-secondary: var(--wp--preset--color--ink);
	--directorist-color-btn-secondary-bg: var(--wp--preset--color--paper-deep);
	--directorist-color-btn-secondary-border: var(--wp--preset--color--line);
	--directorist-color-marker-shape: var(--wp--preset--color--ink);
	--directorist-border-radius-xs: var(--wp--custom--radius);
	--directorist-border-radius-sm: var(--wp--custom--radius);
	--directorist-border-radius-md: 0;
	--directorist-border-radius-lg: 0;
}

/* Surfaces Directorist paints with a literal #fff instead of a variable. Never white (BANNED).
   Prefixed with body: Directorist's main.css loads after ours with identical selectors. */
body .listing-with-sidebar__sidebar {
	background-color: var(--wp--preset--color--paper-deep);
}