/**
 * SpicePay design tokens — single source of truth for plugin colors.
 *
 * Loaded ahead of every other plugin stylesheet so admin and frontend
 * share one source of truth for colors. Only the tokens the plugin
 * actually uses are included; if you reach for a token that isn't here,
 * derive it from the SpicePay brand palette (BRAND.env) rather than
 * inventing a new value.
 *
 * Tokens are scoped to `.spicepay-wrap` (admin) and the frontend
 * shell so we don't leak `--sp-*` into the rest of WP admin or the
 * theme — that would make every other CSS author's life harder.
 */

:root,
.spicepay-wrap,
.spicepay-frontend {
	/* Brand spice tones */
	--sp-primary:        #BB6027;
	--sp-primary-mid:    #CB7C46;
	--sp-primary-light:  #DDA173;
	--sp-primary-dark:   #1F0E07;

	/* Page text + supporting copy */
	--sp-text:           #0f172a;
	--sp-text-secondary: #475569;
	--sp-text-muted:     #94a3b8;
	--sp-text-inverse:   #ffffff;

	/* Surfaces + borders */
	--sp-card-bg:     #ffffff;
	--sp-card-border: #e2e8f0;
	--sp-border:      #e2e8f0;

	/* Status — drives admin pills + connect card states */
	--sp-success:    #10b981;
	--sp-success-bg: #ecfdf5;
	--sp-warning:    #d63638; /* WP-aligned red so admin notices match */
	--sp-warning-bg: #fff5f5;
	--sp-info:       #2271b1;
	--sp-info-bg:    #eff6ff;

	/* Status pill pairs (payment lifecycle) */
	--sp-status-green-bg:   #dcfce7;
	--sp-status-green-text: #15803d;
	--sp-status-amber-bg:   #fef3c7;
	--sp-status-amber-text: #92400e;
	--sp-status-blue-bg:    #dbeafe;
	--sp-status-blue-text:  #1d4ed8;
	--sp-status-red-bg:     #fee2e2;
	--sp-status-red-text:   #b91c1c;
}