/* KUMITATE Site Tools: block style collection, shared tokens.
   Loaded before any part (box, list, media, layout) and only with one of them.

   A theme or child theme can set these on :root, body or one block:
     --siteframe-tools-accent           decoration color (theme accent)
     --siteframe-tools-on-accent        icons and numbers on the accent color
     --siteframe-tools-box-bg           tinted background (a pale accent)
     --siteframe-tools-box-text         text on boxes that have their own background
     --siteframe-tools-box-line         quiet lines and frames
     --siteframe-tools-box-radius       corner radius of boxes and frames
     --siteframe-tools-box-border-width width of outlines
     --siteframe-tools-box-padding-block / -inline   inner space of boxes
     --siteframe-tools-box-shadow       shadow of raised boxes and cards
     --siteframe-tools-good / -bad / -info / -caution   icon colors
     --siteframe-tools-list-mark        list marks
     --siteframe-tools-border-1 ... -4  border sets, as a border shorthand
     --siteframe-tools-media-radius     corner radius of framed images
     --siteframe-tools-i-*              the icon images (used as masks)

   Private working copies start with --_st- and are set on the styled blocks
   themselves, so a value set on any ancestor is picked up. The selector is
   wrapped in :where() and adds no specificity. */

:where([class*="is-style-siteframe-tools-"], [class*="siteframe-tools-border-"], [class*="siteframe-tools-list-"], .is-style-siteframe-double) {
	--_st-accent: var(--siteframe-tools-accent, var(--wp--preset--color--accent, #2f6b5a));
	--_st-on-accent: var(--siteframe-tools-on-accent, var(--wp--preset--color--on-accent, #fff));
	--_st-base: var(--wp--preset--color--base, #fff);
	--_st-text: var(--siteframe-tools-box-text, var(--wp--preset--color--contrast, #222));
	/* Without color-mix() the pale versions fall back to the theme's surface color. */
	--_st-tint: var(--siteframe-tools-box-bg, var(--wp--preset--color--surface, #f3f4f2));
	--_st-tint-strong: var(--wp--preset--color--surface, #e8ebe8);
	--_st-line: var(--siteframe-tools-box-line, #0000002b);
	--_st-muted: var(--wp--preset--color--contrast, #555);
	--_st-radius: var(--siteframe-tools-box-radius, var(--wp--custom--siteframe--radius--card, 10px));
	--_st-bw: var(--siteframe-tools-box-border-width, 1px);
	--_st-py: var(--siteframe-tools-box-padding-block, 1.1em);
	--_st-px: var(--siteframe-tools-box-padding-inline, 1.4em);
	--_st-shadow: var(--siteframe-tools-box-shadow, var(--wp--custom--siteframe--shadow--card, 0 6px 22px #0000001c, 0 2px 6px #0000000d));
	--_st-good: var(--siteframe-tools-good, var(--_st-accent));
	--_st-bad: var(--siteframe-tools-bad, var(--_st-text));
	--_st-info: var(--siteframe-tools-info, var(--_st-accent));
	--_st-caution: var(--siteframe-tools-caution, var(--_st-accent));
	--siteframe-tools-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--siteframe-tools-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
	--siteframe-tools-i-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
	--siteframe-tools-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
	--siteframe-tools-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.3'/%3E%3Cpath d='M12 11v5.8M12 7.6v.1'/%3E%3C/svg%3E");
	--siteframe-tools-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 16.6V11a5.8 5.8 0 0 1 11.6 0v5.6l1.6 1.6H4.6z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
	--siteframe-tools-i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4l1-4.4L15.6 5a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L9 18.4z'/%3E%3Cpath d='M13.6 7l3.4 3.4'/%3E%3C/svg%3E");
	--siteframe-tools-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 5.6c3.1-1 6.1-.8 8.6 1 2.5-1.8 5.5-2 8.6-1v13c-3.1-1-6.1-.8-8.6 1-2.5-1.8-5.5-2-8.6-1z'/%3E%3Cpath d='M12 6.6v13'/%3E%3C/svg%3E");
	--siteframe-tools-i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17h5.6M10.2 20.4h3.6'/%3E%3Cpath d='M8.3 13.9a6 6 0 1 1 7.4 0c-.8.7-1 1.5-1 2.1H9.3c0-.6-.2-1.4-1-2.1z'/%3E%3C/svg%3E");
	--siteframe-tools-i-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.3'/%3E%3Cpath d='M9.4 9.4a2.7 2.7 0 0 1 5.3.7c0 1.9-2.7 2.2-2.7 4.1M12 17.3v.1'/%3E%3C/svg%3E");
	--siteframe-tools-i-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.9l9.1 15.7H2.9z'/%3E%3Cpath d='M12 10v4.3M12 17.1v.1'/%3E%3C/svg%3E");
	--siteframe-tools-i-memo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h8.6l3.9 3.9v13.3H6z'/%3E%3Cpath d='M9.4 11.6h5.6M9.4 15.2h5.6M9.4 8h2.6'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:where([class*="is-style-siteframe-tools-"], [class*="siteframe-tools-border-"], [class*="siteframe-tools-list-"], .is-style-siteframe-double) {
		--_st-tint: var(--siteframe-tools-box-bg, color-mix(in srgb, var(--_st-accent) 9%, var(--_st-base)));
		--_st-tint-strong: color-mix(in srgb, var(--_st-accent) 22%, var(--_st-base));
		--_st-line: var(--siteframe-tools-box-line, color-mix(in srgb, var(--_st-text) 20%, var(--_st-base)));
		--_st-muted: color-mix(in srgb, var(--_st-text) 72%, var(--_st-base));
	}
}