/* ============================================================
   Shopify Polaris design tokens (v12, light theme) — vendored subset.
   These are the `:root` custom properties from @shopify/polaris styles.css
   (the component classes there require the React components, so we use only
   the tokens and hand-build the UI). Names match Polaris so the full token
   file can be dropped in later without touching app.css.
   ============================================================ */
:root {
	/* color · surfaces & text */
	--p-color-bg:                       rgba(241, 241, 241, 1);
	--p-color-bg-surface:               rgba(255, 255, 255, 1);
	--p-color-bg-surface-secondary:     rgba(247, 247, 247, 1);
	--p-color-bg-surface-hover:         rgba(247, 247, 247, 1);
	--p-color-bg-surface-active:        rgba(240, 240, 240, 1);
	--p-color-bg-surface-selected:      rgba(241, 245, 249, 1);

	--p-color-text:                     rgba(48, 48, 48, 1);
	--p-color-text-secondary:           rgba(97, 97, 97, 1);
	--p-color-text-disabled:            rgba(181, 181, 181, 1);
	--p-color-text-brand-on-bg-fill:    rgba(255, 255, 255, 1);
	--p-color-text-link:                rgba(0, 91, 211, 1);

	--p-color-border:                   rgba(227, 227, 227, 1);
	--p-color-border-secondary:         rgba(235, 235, 235, 1);
	--p-color-border-hover:             rgba(204, 204, 204, 1);
	--p-color-border-focus:             rgba(0, 91, 211, 1);

	/* color · fills (buttons / accents) */
	--p-color-bg-fill-brand:            rgba(48, 48, 48, 1);
	--p-color-bg-fill-brand-hover:      rgba(26, 26, 26, 1);
	--p-color-bg-fill-brand-active:     rgba(0, 0, 0, 1);

	/* color · status (badges / stock) */
	--p-color-bg-fill-success-secondary: rgba(205, 254, 225, 1);
	--p-color-text-success:             rgba(12, 81, 50, 1);
	--p-color-bg-fill-caution-secondary: rgba(255, 241, 194, 1);
	--p-color-text-caution:             rgba(79, 71, 0, 1);
	--p-color-bg-fill-critical-secondary: rgba(254, 233, 232, 1);
	--p-color-text-critical:            rgba(142, 31, 11, 1);
	--p-color-bg-fill-info-secondary:   rgba(224, 240, 255, 1);
	--p-color-text-info:                rgba(0, 58, 90, 1);

	/* color · icons */
	--p-color-icon:                     rgba(74, 74, 74, 1);
	--p-color-icon-secondary:           rgba(138, 138, 138, 1);

	/* spacing */
	--p-space-050: 0.125rem;
	--p-space-100: 0.25rem;
	--p-space-150: 0.375rem;
	--p-space-200: 0.5rem;
	--p-space-300: 0.75rem;
	--p-space-400: 1rem;
	--p-space-500: 1.25rem;
	--p-space-600: 1.5rem;
	--p-space-800: 2rem;
	--p-space-1000: 2.5rem;

	/* radius */
	--p-border-radius-100: 0.25rem;
	--p-border-radius-200: 0.5rem;
	--p-border-radius-300: 0.75rem;
	--p-border-radius-full: 624.9375rem;

	/* typography */
	--p-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--p-font-family-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, monospace;
	--p-font-size-275: 0.75rem;
	--p-font-size-300: 0.75rem;
	--p-font-size-325: 0.8125rem;
	--p-font-size-350: 0.875rem;
	--p-font-size-400: 1rem;
	--p-font-size-500: 1.25rem;
	--p-font-size-600: 1.5rem;
	--p-font-weight-regular: 400;
	--p-font-weight-medium: 500;
	--p-font-weight-semibold: 600;
	--p-font-weight-bold: 700;

	/* shadow */
	--p-shadow-100: 0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07);
	--p-shadow-200: 0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07);
	--p-shadow-300: 0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.10);
	--p-shadow-400: 0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.12);
}