/**
 * Signature Series Platform — Design System
 * ------------------------------------------
 * Phase 2 foundation: design tokens + reusable UI components.
 * Loaded on both the frontend (before ssp-book-now.css / ssp-order-form.css)
 * and the admin (before ssp-admin.css). Every later Phase 2 milestone
 * builds on the tokens and classes defined here.
 *
 * @since 1.8.0
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
	/* Brand */
	--ssp-green: #4c7d1c;
	--ssp-green-bright: #5c9526;   /* hover — brighter, per v1.6.2 rule  */
	--ssp-green-deep: #3f6817;     /* active/pressed                     */
	--ssp-green-soft: #eef5e6;     /* tinted backgrounds                 */
	--ssp-green-ring: rgba(76, 125, 28, 0.28);

	/* Neutrals */
	--ssp-ink: #1a1d1f;
	--ssp-gray-700: #3f4649;
	--ssp-gray-500: #6b7478;
	--ssp-gray-300: #d4d9db;
	--ssp-gray-200: #e6eaec;
	--ssp-gray-100: #f4f6f7;
	--ssp-white: #ffffff;

	/* Semantic */
	--ssp-amber: #b45309;   --ssp-amber-bg: #fef3c7;
	--ssp-blue: #1d4ed8;    --ssp-blue-bg: #dbeafe;
	--ssp-indigo: #4338ca;  --ssp-indigo-bg: #e0e7ff;
	--ssp-purple: #7e22ce;  --ssp-purple-bg: #f3e8ff;
	--ssp-teal: #0f766e;    --ssp-teal-bg: #ccfbf1;
	--ssp-red: #b91c1c;     --ssp-red-bg: #fee2e2;

	/* Typography */
	--ssp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;

	/* Shape & depth */
	--ssp-radius-sm: 8px;
	--ssp-radius: 12px;
	--ssp-radius-lg: 16px;
	--ssp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--ssp-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
	--ssp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

	/* Motion */
	--ssp-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ssp-speed: 0.18s;
}

/* =========================================================
   2. BUTTONS
   Every property is pinned in every state so no theme or
   WP-admin stylesheet can override them. Use on <button>
   or <a> elements.
   ========================================================= */

.ssp-btn,
button.ssp-btn,
a.ssp-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	font-family: var(--ssp-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	text-transform: none !important;
	border: 1px solid transparent !important;
	border-radius: var(--ssp-radius-sm) !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: var(--ssp-shadow-sm) !important;
	transition:
		background-color var(--ssp-speed) var(--ssp-ease),
		border-color var(--ssp-speed) var(--ssp-ease),
		color var(--ssp-speed) var(--ssp-ease),
		box-shadow var(--ssp-speed) var(--ssp-ease),
		transform var(--ssp-speed) var(--ssp-ease) !important;
}

/* Primary — brand green, brighter on hover, white text locked */
.ssp-btn--primary,
button.ssp-btn--primary,
a.ssp-btn--primary {
	background: var(--ssp-green) !important;
	color: var(--ssp-white) !important;
}
.ssp-btn--primary:hover,
button.ssp-btn--primary:hover,
a.ssp-btn--primary:hover {
	background: var(--ssp-green-bright) !important;
	color: var(--ssp-white) !important;
	box-shadow: var(--ssp-shadow) !important;
	transform: translateY(-1px) !important;
}
.ssp-btn--primary:active,
button.ssp-btn--primary:active,
a.ssp-btn--primary:active {
	background: var(--ssp-green-deep) !important;
	color: var(--ssp-white) !important;
	box-shadow: var(--ssp-shadow-sm) !important;
	transform: translateY(0) !important;
}

/* Secondary — white with border, green tint on hover */
.ssp-btn--secondary,
button.ssp-btn--secondary,
a.ssp-btn--secondary {
	background: var(--ssp-white) !important;
	color: var(--ssp-gray-700) !important;
	border-color: var(--ssp-gray-300) !important;
}
.ssp-btn--secondary:hover,
button.ssp-btn--secondary:hover,
a.ssp-btn--secondary:hover {
	background: var(--ssp-green-soft) !important;
	color: var(--ssp-green) !important;
	border-color: var(--ssp-green) !important;
}
.ssp-btn--secondary:active,
button.ssp-btn--secondary:active,
a.ssp-btn--secondary:active {
	background: var(--ssp-gray-100) !important;
	color: var(--ssp-green-deep) !important;
}

/* Ghost — borderless, for low-emphasis actions */
.ssp-btn--ghost,
button.ssp-btn--ghost,
a.ssp-btn--ghost {
	background: transparent !important;
	color: var(--ssp-gray-700) !important;
	box-shadow: none !important;
}
.ssp-btn--ghost:hover,
button.ssp-btn--ghost:hover,
a.ssp-btn--ghost:hover {
	background: var(--ssp-gray-100) !important;
	color: var(--ssp-ink) !important;
}

/* Danger — destructive actions (Delete Order) */
.ssp-btn--danger,
button.ssp-btn--danger,
a.ssp-btn--danger {
	background: var(--ssp-white) !important;
	color: var(--ssp-red) !important;
	border-color: #f1a9a9 !important;
}
.ssp-btn--danger:hover,
button.ssp-btn--danger:hover,
a.ssp-btn--danger:hover {
	background: var(--ssp-red) !important;
	color: var(--ssp-white) !important;
	border-color: var(--ssp-red) !important;
}

/* Focus ring — keyboard accessibility, all variants */
.ssp-btn:focus-visible,
button.ssp-btn:focus-visible,
a.ssp-btn:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 4px var(--ssp-green-ring) !important;
}

/* Disabled — all variants */
.ssp-btn:disabled,
.ssp-btn[disabled],
button.ssp-btn:disabled,
a.ssp-btn.is-disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
	pointer-events: auto !important;
}

/* Sizes */
.ssp-btn--sm,
button.ssp-btn--sm,
a.ssp-btn--sm {
	padding: 8px 16px !important;
	font-size: 13px !important;
}
.ssp-btn--lg,
button.ssp-btn--lg,
a.ssp-btn--lg {
	padding: 16px 32px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	border-radius: var(--ssp-radius) !important;
}

/* Loading state — add .is-loading via JS if needed */
.ssp-btn.is-loading {
	position: relative !important;
	color: transparent !important;
	pointer-events: none !important;
}
.ssp-btn.is-loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--ssp-white);
	border-radius: 50%;
	animation: ssp-spin 0.7s linear infinite;
}
@keyframes ssp-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================
   3. STATUS BADGES
   One class + one modifier, consistent across the plugin.
   ========================================================= */

.ssp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	font-family: var(--ssp-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	border-radius: 999px;
	white-space: nowrap;
}
.ssp-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ssp-badge--pending    { background: var(--ssp-amber-bg);  color: var(--ssp-amber); }
.ssp-badge--paid       { background: var(--ssp-green-soft); color: var(--ssp-green); }
.ssp-badge--designing  { background: var(--ssp-blue-bg);   color: var(--ssp-blue); }
.ssp-badge--printing   { background: var(--ssp-indigo-bg); color: var(--ssp-indigo); }
.ssp-badge--packaging  { background: var(--ssp-purple-bg); color: var(--ssp-purple); }
.ssp-badge--dispatched { background: var(--ssp-teal-bg);   color: var(--ssp-teal); }
.ssp-badge--delivered  { background: var(--ssp-green);     color: var(--ssp-white); }
.ssp-badge--cancelled  { background: var(--ssp-red-bg);    color: var(--ssp-red); }
.ssp-badge--neutral    { background: var(--ssp-gray-100);  color: var(--ssp-gray-700); }

/* =========================================================
   4. CARDS
   ========================================================= */

.ssp-card {
	background: var(--ssp-white);
	border: 1px solid var(--ssp-gray-200);
	border-radius: var(--ssp-radius);
	box-shadow: var(--ssp-shadow-sm);
	padding: 24px;
}
.ssp-card__title {
	margin: 0 0 4px;
	font-family: var(--ssp-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--ssp-ink);
}
.ssp-card__subtitle {
	margin: 0 0 16px;
	font-family: var(--ssp-font);
	font-size: 13px;
	color: var(--ssp-gray-500);
}

/* =========================================================
   5. ALERTS
   ========================================================= */

.ssp-alert {
	display: block;
	padding: 12px 16px;
	font-family: var(--ssp-font);
	font-size: 14px;
	line-height: 1.5;
	border-radius: var(--ssp-radius-sm);
	border: 1px solid transparent;
}
.ssp-alert--error   { background: var(--ssp-red-bg);   border-color: #f1a9a9; color: var(--ssp-red); }
.ssp-alert--warning { background: var(--ssp-amber-bg); border-color: #fcd34d; color: var(--ssp-amber); }
.ssp-alert--success { background: var(--ssp-green-soft); border-color: #bbd89e; color: var(--ssp-green); }
.ssp-alert--info    { background: var(--ssp-blue-bg);  border-color: #93c5fd; color: var(--ssp-blue); }

/* =========================================================
   6. UTILITIES
   ========================================================= */

.ssp-muted {
	color: var(--ssp-gray-500);
	font-size: 13px;
}
.ssp-divider {
	border: none;
	border-top: 1px solid var(--ssp-gray-200);
	margin: 16px 0;
}