/*
 * CreatorHub backdrop patterns — replaces the base grid layer.
 * Each pattern is an SVG tile used as a mask over the skin's
 * --chub-pattern-ink color, so the same tile works on any palette.
 * body.chub-pattern-<id> comes from Design → Background pattern;
 * the Pattern strength slider scales .chub-bg__grid opacity.
 */

/* hexagon lattice — flat-top hexes sharing edges */
body.chub-pattern-hexagons .chub-bg__grid {
	background-image: none;
	background-color: var(--chub-pattern-ink, rgba(128, 128, 128, 0.16));
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpath d='M40 0H20L10 17.32 20 34.64 40 34.64 50 17.32Z M10 17.32H0 M50 17.32H60' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpath d='M40 0H20L10 17.32 20 34.64 40 34.64 50 17.32Z M10 17.32H0 M50 17.32H60' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;
}

/* dotted field */
body.chub-pattern-dots .chub-bg__grid {
	background-image: none;
	background-color: var(--chub-pattern-ink, rgba(128, 128, 128, 0.2));
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.7' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.7' fill='black'/%3E%3C/svg%3E");
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;
}

/* zigzag chevron rows */
body.chub-pattern-zigzag .chub-bg__grid {
	background-image: none;
	background-color: var(--chub-pattern-ink, rgba(128, 128, 128, 0.16));
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 30 16'%3E%3Cpath d='M0 13L15 3 30 13' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 30 16'%3E%3Cpath d='M0 13L15 3 30 13' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E");
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;
}