/**
 * PrintGenie design tokens.
 *
 * Every colour, space and radius used anywhere in the plugin is declared here. No
 * component is allowed to invent a value: that is what keeps the admin screens and the
 * shop-front panel looking like one product rather than two.
 */

.printgenie-wrap,
.printgenie-panel,
.printgenie-product-panel,
.printgenie-order-designs,
.printgenie-wizard {
	/* Neutrals */
	--pg-ink: #16181d;
	--pg-ink-soft: #4a4f5a;
	/* Muted text still has to clear 4.5:1 on the sunken surface, not just on white. */
	--pg-ink-muted: #686e7b;
	--pg-line: #e3e6ec;
	/* Used on input borders, which WCAG 1.4.11 holds to 3:1. --pg-line stays decorative. */
	--pg-line-strong: #8b93a3;
	--pg-surface: #ffffff;
	--pg-surface-sunken: #f6f7fa;
	--pg-surface-raised: #ffffff;

	/* Accent: one hue, used sparingly */
	--pg-accent: #5b53e0;
	--pg-accent-hover: #4a42cf;
	--pg-accent-soft: #eeecfd;
	--pg-accent-line: #cfcbf7;
	--pg-on-accent: #ffffff;

	/* Semantic */
	--pg-success: #16794a;
	--pg-success-soft: #e6f6ee;
	--pg-warning: #8a5a00;
	--pg-warning-soft: #fdf3e0;
	--pg-danger: #b3261e;
	--pg-danger-soft: #fdecea;

	/* Typography */
	--pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--pg-text-xs: 12px;
	--pg-text-sm: 13px;
	--pg-text-md: 14px;
	--pg-text-lg: 16px;
	--pg-text-xl: 20px;
	--pg-text-2xl: 26px;
	--pg-text-3xl: 32px;
	--pg-leading: 1.55;
	--pg-leading-tight: 1.25;

	/* Space scale */
	--pg-space-1: 4px;
	--pg-space-2: 8px;
	--pg-space-3: 12px;
	--pg-space-4: 16px;
	--pg-space-5: 24px;
	--pg-space-6: 32px;
	--pg-space-7: 48px;
	--pg-space-8: 80px;

	/* Shape */
	--pg-radius-sm: 6px;
	--pg-radius: 10px;
	--pg-radius-lg: 16px;
	--pg-radius-pill: 999px;

	/* Elevation, deliberately soft */
	--pg-shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06);
	--pg-shadow: 0 2px 8px rgba(22, 24, 29, 0.07);
	--pg-shadow-lg: 0 12px 32px rgba(22, 24, 29, 0.1);

	/* Motion */
	--pg-fast: 120ms ease;
	--pg-normal: 200ms ease;

	/* Focus ring, one definition everywhere */
	--pg-focus: 0 0 0 3px var(--pg-accent-soft), 0 0 0 4px var(--pg-accent);
}

/* The WordPress admin dark scheme and OS dark mode both need to stay readable. */
@media (prefers-color-scheme: dark) {
	.printgenie-wrap,
	.printgenie-panel,
	.printgenie-product-panel,
	.printgenie-order-designs,
	.printgenie-wizard {
		--pg-ink: #eef0f5;
		--pg-ink-soft: #c3c8d4;
		--pg-ink-muted: #9aa1b1;
		--pg-line: #333844;
		--pg-line-strong: #6b7385;
		--pg-surface: #1d2027;
		--pg-surface-sunken: #171a20;
		--pg-surface-raised: #22262f;

		/*
			The accent and the status colours have to be re-stated here, not just their
			soft backgrounds. The light values are chosen to be readable on white, and on
			a dark surface they land between 2.4:1 and 3.1:1 — unreadable.

			Because the accent now reads as a light colour, anything sitting on top of it
			has to flip to dark ink. Lightening the fill without flipping the label just
			moves the failure from the link to the button.
		*/
		--pg-accent: #8a83f0;
		--pg-accent-hover: #9d97f4;
		--pg-on-accent: #16181d;
		--pg-accent-soft: #2a2760;
		--pg-accent-line: #3d389b;
		--pg-success: #3fbf85;
		--pg-success-soft: #10281e;
		--pg-warning: #d9a02a;
		--pg-warning-soft: #2b2010;
		--pg-danger: #f0776d;
		--pg-danger-soft: #2e1512;
		--pg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--pg-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
		--pg-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.printgenie-wrap *,
	.printgenie-panel * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}