/*
 * Webstore design tokens (§14.4, §14.4a).
 *
 * The static half of the token layer. Every name here is also declared in
 * `Webstore_Design_Tokens`, which is what the Customizer edits and what
 * `Webstore_Appearance` emits inline on store pages. This file is the fallback
 * and the documentation: a shop that has personalised nothing is styled
 * entirely from here, and a shop that has personalised something overrides only
 * the names it changed.
 *
 * The two must agree. `DesignTokensTest` asserts that every token in the
 * catalogue is declared here with the same default, so they cannot drift.
 *
 * Light is the base; dark is a redefinition of the same names, so nothing
 * anywhere else needs to know which is active.
 *
 * The palette is deliberately restrained: a near-neutral canvas and one accent,
 * used only for the primary action. That single rule does more for the
 * "modern shop" feel than any amount of decoration (§14.6).
 */

:root {
	/* Surfaces and ink */
	--webstore-color-bg: #ffffff;
	--webstore-color-surface: #f7f7f5;
	--webstore-color-ink: #16171a;
	--webstore-color-ink-muted: #5d6169;
	--webstore-color-border: #e3e3e0;

	/*
	 * Darker than the hairline above, and deliberately so. A divider between
	 * two rows is decorative; the edge of a text field is the only thing that
	 * says it is a text field, and WCAG 1.4.11 asks for 3:1 on that. One
	 * token used for both meant either invisible inputs or heavy rules.
	 */
	--webstore-color-field-border: #7d7d7a;

	/*
	 * Not simply `--webstore-border-width`.
	 *
	 * Line thickness is a personalisable token with no lower bound, and a shop
	 * that sets it to 0 for flat, borderless cards would also erase the edge of
	 * every text field - leaving a control that is invisible at any contrast
	 * ratio, which the colour check cannot see. `max()` lets a card be
	 * borderless while an input keeps the edge that says it is one.
	 */
	--webstore-field-border-width: max(1px, var(--webstore-border-width));

	/* One accent, used sparingly and always for the primary action */
	--webstore-color-accent: #1c1c1c;
	--webstore-color-accent-ink: #ffffff;
	--webstore-color-accent-hover: #333333;

	/* Status */
	--webstore-color-success: #1a7f37;
	--webstore-color-warning: #8a6100;
	--webstore-color-danger: #9a1e1e;
	--webstore-color-sale: #9a1e1e;

	/* Type */
	--webstore-font-display: inherit;
	--webstore-font-body: inherit;

	--webstore-weight-heading: 600;
	--webstore-tracking-heading: normal;
	--webstore-transform-button: none;

	--webstore-scale-xs: 0.75rem;
	--webstore-scale-sm: 0.875rem;
	--webstore-scale-md: 1rem;
	--webstore-scale-lg: 1.125rem;
	--webstore-scale-xl: 1.375rem;
	--webstore-scale-2xl: 1.75rem;
	--webstore-scale-3xl: 2.5rem;

	/*
	 * A strict spacing rhythm. Generous whitespace on a consistent scale is
	 * most of what separates a considered shop from a crowded one.
	 */
	--webstore-space-1: 0.25rem;
	--webstore-space-2: 0.5rem;
	--webstore-space-3: 0.75rem;
	--webstore-space-4: 1rem;
	--webstore-space-5: 1.25rem;
	--webstore-space-6: 1.5rem;
	--webstore-space-8: 2rem;
	--webstore-space-10: 2.5rem;
	--webstore-space-12: 3rem;

	--webstore-radius-sm: 4px;
	--webstore-radius-md: 8px;
	--webstore-radius-lg: 16px;

	/*
	 * Controls and photographs round separately from panels, because a pill is
	 * a reasonable thing to want on a button and never on a product shot. One
	 * shared token meant a preset asking for pill buttons also cropped every
	 * product photograph into a circle.
	 */
	--webstore-radius-control: 6px;
	--webstore-radius-media: 8px;

	--webstore-border-width: 1px;

	--webstore-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--webstore-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--webstore-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);

	--webstore-container: 1200px;
	--webstore-grid-gap: 1.5rem;

	/*
	 * The grid is sized by the smallest card it will tolerate rather than by a
	 * column count, so it adapts to the screen it is on and to a shop owner who
	 * wants larger or smaller product images.
	 */
	--webstore-grid-min: 240px;

	/* One aspect ratio across every card, whatever the photography is. */
	--webstore-card-ratio: 1 / 1;
	--webstore-image-fit: cover;

	/* Fast and small. Long animation reads as sluggish, not polished. */
	--webstore-transition: 160ms ease-out;
}

/*
 * No `@media (prefers-color-scheme: dark)` here, deliberately.
 *
 * This is a static file. Whether the store may go dark depends on whether the
 * *theme around it* goes dark - a light-only theme leaves our near-white ink on
 * its white page at 1.11:1 - and a stylesheet cannot know that. The decision
 * needs the active theme adapter, so it is made in
 * `Webstore_Appearance::inline_css()`, which emits the media block only when
 * the theme has declared `webstore-dark` support.
 *
 * The explicit block below stays: `[data-theme="dark"]` is set by the plugin
 * when a shop has pinned dark, which is a choice rather than a guess.
 */

:root[data-theme="dark"] {
	--webstore-color-bg: #131417;
	--webstore-color-surface: #1c1e22;
	--webstore-color-ink: #f2f3f5;
	--webstore-color-ink-muted: #a2a7b0;
	--webstore-color-border: #2c2f35;
	--webstore-color-field-border: #787d86;

	--webstore-color-accent: #f2f3f5;
	--webstore-color-accent-ink: #16171a;
	--webstore-color-accent-hover: #d9dade;

	--webstore-color-success: #4ac26b;
	--webstore-color-warning: #d7a12c;
	--webstore-color-danger: #e5534b;
	--webstore-color-sale: #e5534b;

	--webstore-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--webstore-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
	--webstore-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65);
}