/*
 * The frontend skin. The customer facing panel has its own quiet, modern look instead of
 * borrowing the theme's, so the same product looks the same on every shop.
 *
 * The dark values apply when the shop owner picked Dark, and when they left the setting on
 * Automatic and the visitor device asks for dark.
 */

.mls3-browse,
.mls3-panel {
	color-scheme: light dark;

	--mls3-bg: #ffffff;
	--mls3-surface: #f8f9fb;
	--mls3-fg: #16181d;
	--mls3-muted: #6b7280;
	--mls3-border: #e5e7eb;
	--mls3-row-hover: #f4f5f7;
	/*
	 * The four shades below come from the colour the shop owner picked. The plugin prints
	 * them with the stylesheet, and the values here are what the panel falls back to.
	 */
	--mls3-accent: var(--mls3-light-accent, #5b5bd6);
	--mls3-accent-strong: var(--mls3-light-accent-strong, #4e4eb8);
	--mls3-accent-fg: #ffffff;
	--mls3-accent-soft: var(--mls3-light-accent-soft, #e6e6fb);
	--mls3-selected: var(--mls3-light-selected, #eeeefc);
	--mls3-danger: #d92d20;
	--mls3-success: #079455;
	--mls3-skeleton: #eef0f3;
	--mls3-field: #f3f4f6;

	--mls3-radius: 12px;
	--mls3-radius-sm: 10px;
	--mls3-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
	--mls3-shadow-2: 0 8px 24px rgba(16, 24, 40, .10);

	--mls3-space-1: 4px;
	--mls3-space-2: 8px;
	--mls3-space-3: 12px;
	--mls3-space-4: 16px;

	--mls3-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mls3-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--mls3-size: 14px;
	--mls3-size-sm: 12px;
	--mls3-row-h: 52px;

	--mls3-dur: 160ms;
	--mls3-ease: cubic-bezier(.4, 0, .2, 1);

	--mls3-ft-s: 62%;
	--mls3-ft-l: 45%;

	/* The soft square behind a file icon, in the same hue as the icon itself. */
	--mls3-tile-s: 80%;
	--mls3-tile-l: 94%;
}

/* Segoe UI and Tahoma carry Persian and Arabic on every platform the system stack does not. */
[dir="rtl"].mls3-browse,
[dir="rtl"].mls3-panel {
	--mls3-font: system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
}

.mls3-browse[data-scheme="light"],
.mls3-panel[data-scheme="light"] {
	color-scheme: light;
}

.mls3-browse[data-scheme="dark"],
.mls3-panel[data-scheme="dark"] {
	color-scheme: dark;

	--mls3-bg: #16181d;
	--mls3-surface: #1c1f26;
	--mls3-fg: #f2f4f7;
	--mls3-muted: #98a2b3;
	--mls3-border: #2b2f3a;
	--mls3-row-hover: #21252e;
	--mls3-accent: var(--mls3-dark-accent, #8b8bf0);
	--mls3-accent-strong: var(--mls3-dark-accent-strong, #7777cf);
	--mls3-accent-fg: #16181d;
	--mls3-accent-soft: var(--mls3-dark-accent-soft, #2a2e4d);
	--mls3-selected: var(--mls3-dark-selected, #262a45);
	--mls3-danger: #f97066;
	--mls3-success: #47cd89;
	--mls3-skeleton: #21252e;
	--mls3-field: #21252e;
	--mls3-shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
	--mls3-shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
	--mls3-ft-s: 52%;
	--mls3-ft-l: 66%;
	--mls3-tile-s: 42%;
	--mls3-tile-l: 18%;
}

/*
 * The same dark values again, for the Automatic setting. CSS cannot share one declaration
 * block between a plain selector and a media query, so the two lists must stay in step.
 */
@media ( prefers-color-scheme: dark ) {
	.mls3-browse:not([data-scheme="light"]),
	.mls3-panel:not([data-scheme="light"]) {
		--mls3-bg: #16181d;
		--mls3-surface: #1c1f26;
		--mls3-fg: #f2f4f7;
		--mls3-muted: #98a2b3;
		--mls3-border: #2b2f3a;
		--mls3-row-hover: #21252e;
		--mls3-accent: var(--mls3-dark-accent, #8b8bf0);
		--mls3-accent-strong: var(--mls3-dark-accent-strong, #7777cf);
		--mls3-accent-fg: #16181d;
		--mls3-accent-soft: var(--mls3-dark-accent-soft, #2a2e4d);
		--mls3-selected: var(--mls3-dark-selected, #262a45);
		--mls3-danger: #f97066;
		--mls3-success: #47cd89;
		--mls3-skeleton: #21252e;
		--mls3-field: #21252e;
		--mls3-shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
		--mls3-shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
		--mls3-ft-s: 52%;
		--mls3-ft-l: 66%;
		--mls3-tile-s: 42%;
		--mls3-tile-l: 18%;
	}
}