/*
 * Store bridge — temporary, and scoped on purpose.
 *
 * The store pages come over from 1.9.x unchanged: their markup and store.css
 * are the ones that have been selling since June. They ask for colours by the
 * names that theme carried — eight palette slugs and six custom properties —
 * and none of those names exist in this theme.
 *
 * This file answers those names in terms of this theme's own tokens, so the
 * store takes the current palette instead of carrying a second one. Nothing
 * here is a new colour: every value is a token defined in theme.json.
 *
 * Scoped to .asem-store, never to :root. Defined at the root these names would
 * be available to the whole site, and the site would quietly grow a second set
 * of colour names — the thing the brand rules exist to prevent. `wp asem gate`
 * fails if any of the eight appears outside the store's own files.
 *
 * To retire it: rewrite the store patterns against the theme's classes, drop
 * store.css and this file, and remove the gate row. Recorded in docs/BACKLOG.md.
 */

.asem-store {
	/* The eight palette slugs, in this theme's tokens. */
	--wp--preset--color--bg: var(--wp--preset--color--paper-2);
	--wp--preset--color--bg-elevated: var(--wp--preset--color--paper);
	--wp--preset--color--bg-deep: var(--wp--preset--color--line);
	--wp--preset--color--primary: var(--wp--preset--color--accent);
	--wp--preset--color--primary-strong: var(--wp--preset--color--accent-deep);
	--wp--preset--color--muted: var(--wp--preset--color--text-2);
	/* accent and text are not redefined: both names already exist in this
	   theme and mean the same thing. Repeating them here pointed each at
	   itself, and a property defined in terms of itself resolves to nothing. */
	--wp--preset--color--border: var(--wp--preset--color--line);
	--wp--preset--color--white: var(--wp--preset--color--paper);

	/* The six custom properties store.css expects. */
	--asem-card-bg: linear-gradient(155deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--paper-2) 100%);
	--asem-card-shadow: 0 1px 2px rgba(13, 19, 33, .04), 0 12px 28px -18px rgba(13, 19, 33, .28);
	--asem-cta: var(--wp--preset--color--accent);
	--asem-cta-hover: var(--wp--preset--color--accent-deep);
	--asem-sheen: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
	--asem-accent-line: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--accent) 50%, transparent 100%);
}

/*
 * One language at a time.
 *
 * The store markup carries both languages in the page and hides one with CSS —
 * the convention 1.9.x used everywhere: data-bilingual on the container,
 * lang="ar" and lang="en" on its direct children. This theme renders one
 * language per page instead, so without these rules the store prints Arabic
 * and English together, which is what the first screenshot showed.
 */
.asem-store [data-bilingual] > [lang="ar"] { display: none; }
.asem-store [data-bilingual] > [lang="en"] { display: revert; }
[dir="rtl"] .asem-store [data-bilingual] > [lang="en"] { display: none; }
[dir="rtl"] .asem-store [data-bilingual] > [lang="ar"] { display: revert; }

/* Text on the amber action colour is dark in this system, not white. */
.asem-store .wp-block-button__link,
.asem-store .asem-store__cta,
.asem-store .edd-submit,
.asem-store input[type="submit"] {
	color: var(--wp--preset--color--accent-ink);
}