/*
 * Design tokens — the only place visual constants are defined.
 *
 * The theme and all three plugins reference these custom properties. Replace a value
 * here and the change propagates site-wide. No other file should hard-code colors
 * or font names.
 */

:root {
	/* Primary palette */
	--pm-color-ink:           #0a0a0a;
	--pm-color-surface:       #ffffff;
	--pm-color-accent:        #1e63d0;
	--pm-color-announce:      #1d3fbf;
	--pm-color-announce-text: #ffffff;
	--pm-color-muted:         #5a5a5a;
	--pm-color-border:        #e6e6e6;

	/* State variants */
	--pm-color-ink-hover:     #1c1c1c;  /* Pressed/hover state of ink CTAs. */
	--pm-color-disabled:      #6c6c6c;  /* Disabled CTA background. */
	--pm-color-placeholder:   #bdbdbd;  /* Input placeholder text. */
	--pm-color-input-bg:      #f4f4f4;  /* Soft grey input fills (calculator, designer). */
	--pm-color-surface-soft:  #f7f7f8;  /* Secondary surface (modal body, upsell card). */

	/* Semantic — danger / error */
	--pm-color-danger:        #b32d2e;
	--pm-color-danger-soft:   #fff5f5;

	--pm-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--pm-radius-sm: 4px;
	--pm-radius-md: 8px;

	--pm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--pm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* Thumbnail frame — used by EVERY shirt thumbnail surface across the
	   theme + designer plugin (cart line items, checkout review rows,
	   per-color quantity cards, summary breakdown, saved-designs popover).
	   Two-layer shadow gives the depth without going heavy + 1 px hairline
	   so even white-on-white shirts have a defined edge. Update here ⇒
	   every thumbnail surface updates. */
	--pm-thumb-frame-border: 1px solid var(--pm-color-border);
	--pm-thumb-frame-shadow:
		0 1px 3px rgba(10, 10, 10, 0.06),
		0 4px 12px -2px rgba(10, 10, 10, 0.05);
}