/*
 * Светлая секция — Figma 748:47820 (`light`, y 12152–16142 главной 748:42008): нижние ~4000 px страницы на белом,
 * в ней кейсы, партнёрская программа, безопасность и «foundation for your global». Группа со стилем блока
 * «Light section» (styles/section-light.json): стиль даёт фон light-base и текст light-contrast, а здесь внутри
 * группы тёмные токены палитры подменяются светлыми. Общие части темы — линии сетки, разделитель, приглушённый
 * текст, кнопки, кольцо фокуса — перекрашиваются сами, правил в файле каждой секции для этого не нужно.
 *
 * Тёмный токен → светлый (цвета светлой секции в макете):
 * - base #120526 → light-base #FFFFFF: плашки разделителя под звёздами (748:47825);
 * - contrast #FFFFFF → light-contrast #171717: заголовки и текст (748:47837), кольцо фокуса;
 * - muted #9E9E9E → light-muted #757575: подзаголовок (748:47894), стрелки ленты (748:47839);
 * - contrast-40 → light-contrast-40 (чёрный 40%): приглушённая часть заголовка, выделение в редакторе (748:50388);
 * - contrast-10 и line → light-line #EEEEEE: линии сетки (748:47821), линия и звёзды разделителя (748:47826);
 * - surface #231735 → light-surface #F5F5F5: фон второй кнопки (748:50268);
 * - выделение (custom highlight, тёмное — surface #231735) → light-panel #FAFAFA: наведённая карточка (888:8252,
 *   888:10677, 888:11667, 888:11698; front#1048).
 * Кнопки (748:50262, 748:50268): у Primary текст #2E0D05 вместо #09090B, Tinted — светло-серая с текстом #171717.
 * Вырез углов у кнопок прозрачный, поэтому на белом углы белые, как в макете, без правил.
 */
.is-style-section-light {
	--wp--preset--color--base: var(--wp--preset--color--light-base);
	--wp--preset--color--surface: var(--wp--preset--color--light-surface);
	--wp--preset--color--line: var(--wp--preset--color--light-line);
	--wp--preset--color--muted: var(--wp--preset--color--light-muted);
	--wp--preset--color--contrast: var(--wp--preset--color--light-contrast);
	--wp--preset--color--contrast-40: var(--wp--preset--color--light-contrast-40);
	--wp--preset--color--contrast-10: var(--wp--preset--color--light-line);
	--wp--custom--highlight: var(--wp--preset--color--light-panel);
	--wp--custom--button--ink: var(--wp--custom--button--light--ink);
	--wp--custom--button--tinted--background: var(--wp--preset--color--light-surface);
	/* Отключённых кнопок в макете светлой секции нет: фон light-line (у Tinted light-surface) и текст light-muted. */
	--wp--custom--button--disabled: var(--wp--preset--color--light-line);
	--wp--custom--button--disabled-text: var(--wp--preset--color--light-muted);
	--wp--custom--button--tinted--disabled: var(--wp--preset--color--light-surface);
}

/* Звёзды разделителя сплошные #EEEEEE: тёмная звезда — #D9D9D9 при непрозрачности 0.1, на белом её не видно. */
.is-style-section-light .wp-block-separator.baserd-divider::after {
	background-image:
		url("../icons/star-light.svg"),
		url("../icons/star-light.svg"),
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)),
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base));
}

/* Стрелки ленты карточек (748:47839) серые, а не цвета текста; наведение — primary, как на тёмном. */
.is-style-section-light .baserd-carousel__arrow {
	color: var(--wp--preset--color--muted);
}

/*
 * Tinted (748:50268 «Learn more»): фон light-surface, текст light-contrast. Наведения и нажатия в макете нет;
 * по образцу тёмной — обводка 1 px primary и текст primary при наведении, фон light-line при нажатии.
 */
.is-style-section-light .wp-block-button.is-style-tinted .wp-element-button:not(:disabled, [aria-disabled="true"]) {
	color: var(--wp--preset--color--light-contrast);
}

.is-style-section-light .wp-block-button.is-style-tinted .wp-element-button:is(:hover, :active):not(:disabled, [aria-disabled="true"]) {
	color: var(--wp--preset--color--primary);
}

.is-style-section-light .wp-block-button.is-style-tinted .wp-element-button:hover:not(:disabled, [aria-disabled="true"])::before {
	background-color: var(--wp--preset--color--light-surface);
}

.is-style-section-light .wp-block-button.is-style-tinted .wp-element-button:active:not(:disabled, [aria-disabled="true"])::before {
	background-color: var(--wp--preset--color--light-line);
}

/*
 * White text и на светлом белый: contrast здесь тёмный, а белый в палитре — light-base. При наведении и нажатии
 * текст тёмный, как на тёмном фоне; отключённая — как все.
 */
.is-style-section-light .wp-block-button.is-style-white-text .wp-element-button:not(:hover, :active, :disabled, [aria-disabled="true"]) {
	color: var(--wp--preset--color--light-base);
}