/*
 * rooster/area-matrix (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 2): the legacy Rooster One landing's capability
 * matrix (themes/om-portal-theme/templates/landing-rooster-one.php, `.r1-matrix`, `.r1-cell`), complete on its own:
 * four columns joined by 1 px hairlines inside a 14 px rounded frame (two below 1000 px, one below 720 px, the
 * legacy's breakpoints of the window), each cell 16 px over and 15 px aside behind its 3 px rule, the tag 9.5 px, the
 * name 14 px in its colour, the line 12 px. Colours are the template's own palette as custom tokens
 * (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks; a cell's own colours are its
 * custom properties (the legacy's per-area colours and their darkened twins). Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

/*
 * The recipe's palette, defined here so nothing reads an undefined custom property: the theme's tokens (11.3.3, the
 * palette check in both schemes), the Rooster One template's light and dark pairs (the legacy's) as the fallbacks
 * for a theme without them, except the light warning and danger inks, which are the theme's own (the template's
 * #966500 and #d90b0e read 4.4:1 on their 10% washes: rooster-admin-65's palette check of the demo). The tags' tones are the theme's success, danger, warning ink and accent over a 10% wash
 * of themselves on the page's background: 4.6:1 and more for their words in both schemes. `:where()`: a block's tone
 * (its own sheet) re-maps the brand over it. An area's own colours (its rule and name) are the content's.
 */
:where(.rooster-area-matrix) {
	--wp--custom--rooster-one--line: var(--wp--preset--color--line, light-dark(#d5dbe3, rgb(255 255 255 / 12%)));
	--wp--custom--rooster-one--hairline: var(--wp--preset--color--line, light-dark(#d5dbe3, rgb(117 137 163 / 16%)));
	--wp--custom--rooster-one--ink-2: var(--wp--preset--color--fg, light-dark(#3d454e, #d1d6db));
	--wp--custom--rooster-one--ink-light: var(--wp--preset--color--fg, #212222);
	--wp--custom--rooster-one--ink-dark: var(--wp--preset--color--fg, #eff0f0);
	--wp--custom--rooster-one--surface: var(--wp--preset--color--bg, light-dark(#ffffff, rgb(255 255 255 / 4%)));
	--wp--custom--rooster-one--green-ink: var(--wp--preset--color--success, light-dark(#357a11, #c6f0b2));
	--wp--custom--rooster-one--green-wash: color-mix(in srgb, var(--wp--custom--rooster-one--green-ink) 10%, var(--wp--custom--rooster-one--surface));
	--wp--custom--rooster-one--red-ink: var(--wp--preset--color--danger, light-dark(#c1272d, #f9888a));
	--wp--custom--rooster-one--red-wash: color-mix(in srgb, var(--wp--custom--rooster-one--red-ink) 10%, var(--wp--custom--rooster-one--surface));
	--wp--custom--rooster-one--amber-ink: var(--wp--preset--color--warning-ink, light-dark(#896610, #fae0a8));
	--wp--custom--rooster-one--amber-wash: color-mix(in srgb, var(--wp--custom--rooster-one--amber-ink) 10%, var(--wp--custom--rooster-one--surface));
	--wp--custom--rooster-one--blue: var(--wp--preset--color--accent-text, light-dark(#1e63ce, #8eb4ee));
	--wp--custom--rooster-one--blue-wash: color-mix(in srgb, var(--wp--custom--rooster-one--blue) 10%, var(--wp--custom--rooster-one--surface));
	--wp--custom--rooster-one--mute: var(--wp--preset--color--muted, light-dark(#5b6168, #d3d6d9));
}

.rooster-area-matrix {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--wp--custom--rooster-one--line);
	border-radius: 14px;
	background: var(--wp--custom--rooster-one--hairline);
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--custom--rooster-one--ink-2);
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-area-matrix .rooster-area-matrix__cell {
	--rooster-area-matrix-rule: transparent;
	--rooster-area-matrix-name: var(--wp--custom--rooster-one--ink-light);
	--rooster-area-matrix-dark: var(--wp--custom--rooster-one--ink-dark);
	box-sizing: border-box;
	margin: 0;
	padding: 16px 15px;
	border-left: 3px solid var(--rooster-area-matrix-rule);
	background: var(--wp--custom--rooster-one--surface);
}

.rooster-area-matrix .rooster-area-matrix__cell.is-wide {
	grid-column: 1 / -1;
}

.rooster-area-matrix .rooster-area-matrix__tag {
	display: inline-block;
	margin: 0 0 7px;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.5;
	text-transform: uppercase;
}

.rooster-area-matrix .rooster-area-matrix__tag.is-tone-success {
	background: var(--wp--custom--rooster-one--green-wash);
	color: var(--wp--custom--rooster-one--green-ink);
}

.rooster-area-matrix .rooster-area-matrix__tag.is-tone-danger {
	background: var(--wp--custom--rooster-one--red-wash);
	color: var(--wp--custom--rooster-one--red-ink);
}

.rooster-area-matrix .rooster-area-matrix__tag.is-tone-warning {
	background: var(--wp--custom--rooster-one--amber-wash);
	color: var(--wp--custom--rooster-one--amber-ink);
}

.rooster-area-matrix .rooster-area-matrix__tag.is-tone-one {
	background: var(--wp--custom--rooster-one--blue-wash);
	color: var(--wp--custom--rooster-one--blue);
}

.rooster-area-matrix .rooster-area-matrix__name {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.5;
	text-wrap: wrap;
	color: light-dark(var(--rooster-area-matrix-name), var(--rooster-area-matrix-dark));
}

.rooster-area-matrix .rooster-area-matrix__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--wp--custom--rooster-one--mute);
}

@media (max-width: 1000px) {
	.rooster-area-matrix {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.rooster-area-matrix {
		grid-template-columns: 1fr;
	}
}

/*
 * A family's tone on an item (the block library's tones, BRIEF-2026-11-01-BLOCK-LIBRARY.md): the item carries the
 * theme's is-style-accent-<slug>, so the accent presets inside it are the family's; its rule and its tag take them,
 * the tag's words the family's text shade no lighter than OKLCH 0.45 in the light scheme (4.5:1 on the tint).
 */

.rooster-area-matrix .rooster-area-matrix__tag[class*="is-style-accent-"] {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #1e63ce) 14%, transparent);
	color: light-dark(oklch(from var(--wp--preset--color--accent-text, #1e63ce) min(l, 0.45) c h), var(--wp--preset--color--accent-text, #8eb4ee));
}