/**
 * Subscription System — design tokens ("Slate & Teal")
 *
 * Single source of truth for color. Every other stylesheet in this plugin
 * (admin and public) should read colors from these custom properties instead
 * of hardcoding hex values. This file must be enqueued as a dependency
 * ahead of every other Subscription System stylesheet.
 *
 * Kept byte-identical in both admin/css/ and public/css/ since the plugin
 * has no shared /assets/ directory — treat the two copies as one file.
 */
:root {
	/* Brand */
	--ss-primary: #0F766E;
	--ss-primary-dark: #0B5A54;
	--ss-primary-tint: #E2F2F0;
	--ss-accent: #B45309;
	--ss-accent-tint: #FBEDD9;

	/* Neutrals */
	--ss-ink: #111827;
	--ss-body: #4B5563;
	--ss-muted: #8A94A3;
	--ss-bg: #F6F8F9;
	--ss-surface: #FFFFFF;
	--ss-border: #E1E6EA;

	/* Semantic status */
	--ss-success: #15803D;
	--ss-success-tint: #E3F3E8;
	--ss-warning: #B45309;
	--ss-warning-tint: #FBEDD9;
	--ss-danger: #B42318;
	--ss-danger-tint: #FBE9E7;

	/* Shared metrics */
	--ss-radius: 8px;
	--ss-radius-sm: 6px;
	--ss-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 6px rgba(17, 24, 39, 0.04);
}

/* ── Theme armor ───────────────────────────────────────────────────────────
 * Some themes repaint every native <button> site-wide with high-specificity
 * rules — NewsCircuit/CoverNews, for example, ships
 * `body :is(button, input[type="submit"], …) { background: <brand color> }`,
 * which stomps this plugin's controls and can leave unreadable text/background
 * pairs (a teal label on the theme's crimson, a danger-red label on crimson).
 *
 * Re-assert every plugin-owned control here. The !important is deliberate:
 * these declarations must win against arbitrary theme CSS, and every value
 * still comes from the --ss-* tokens above, so the Appearance screen remains
 * the single source of truth for how these controls look.
 */

/* Floating subscribe trigger */
.ss-interest-floating-btn {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
}

.ss-interest-floating-btn:hover,
.ss-interest-floating-btn:focus {
	background: var(--ss-primary-dark) !important;
	color: #fff !important;
}

/* Modal action buttons (subscribe + discovery share these classes) */
.ss-interest-btn--primary {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
}

.ss-interest-btn--primary:hover,
.ss-interest-btn--primary:focus {
	background: var(--ss-primary-dark) !important;
}

.ss-interest-btn--secondary {
	background: var(--ss-bg) !important;
	color: var(--ss-body) !important;
	border: none !important;
}

.ss-interest-btn--ghost {
	background: transparent !important;
	color: var(--ss-muted) !important;
	border: 1px solid var(--ss-border) !important;
}

.ss-interest-btn--ghost:hover,
.ss-interest-btn--ghost:focus {
	color: var(--ss-ink) !important;
	border-color: var(--ss-muted) !important;
}

.ss-interest-modal__close {
	background: transparent !important;
	color: var(--ss-muted) !important;
	border: none !important;
}

/* In-modal auth step: tabs and the "switch form" text links */
.ss-auth-tab {
	background: transparent !important;
	color: var(--ss-muted) !important;
}

.ss-auth-tab.is-active {
	color: var(--ss-primary) !important;
}

.ss-auth-link {
	background: transparent !important;
	color: var(--ss-primary) !important;
	border: none !important;
}

/* Discovery corner chip */
.ss-discovery-chip__open {
	background: transparent !important;
	color: var(--ss-primary) !important;
	border: none !important;
}

.ss-discovery-chip__open:hover {
	color: var(--ss-primary-dark) !important;
}

.ss-discovery-chip__dismiss {
	background: transparent !important;
	color: var(--ss-muted) !important;
	border: none !important;
}

.ss-discovery-chip__dismiss:hover {
	background: var(--ss-bg) !important;
	color: var(--ss-danger) !important;
}

/* Account tab: save topics / cancel subscription */
.ss-cs-submit {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
}

.ss-cs-submit:hover {
	background: var(--ss-primary-dark) !important;
}

.ss-cs-secondary {
	background: var(--ss-bg) !important;
	color: var(--ss-ink) !important;
	border: 1px solid var(--ss-border) !important;
}

.ss-ca-cancel {
	background: var(--ss-surface) !important;
	color: var(--ss-danger) !important;
	border: 1px solid var(--ss-border) !important;
}

.ss-ca-cancel:hover {
	border-color: var(--ss-danger) !important;
}

/* Inline shortcode subscribe button ([subscriptionsystem_subscribe]) */
.ss-interest-subscribe-btn {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--ss-radius-sm);
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
}

.ss-interest-subscribe-btn:hover,
.ss-interest-subscribe-btn:focus {
	background: var(--ss-primary-dark) !important;
	color: #fff !important;
}

/* Discovery chip "solid" template: the one style where the open button is a
 * filled primary button rather than transparent text on the pill. */
.ss-discovery-chip--style-solid {
	background: var(--ss-primary) !important;
	border-color: var(--ss-primary) !important;
}

.ss-discovery-chip--style-solid .ss-discovery-chip__open {
	color: #fff !important;
}

.ss-discovery-chip--style-solid .ss-discovery-chip__open:hover {
	color: #fff !important;
	text-decoration: underline;
}

.ss-discovery-chip--style-solid .ss-discovery-chip__dismiss {
	color: rgba(255, 255, 255, 0.8) !important;
}

.ss-discovery-chip--style-solid .ss-discovery-chip__dismiss:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
}

/* ── Content Notification popup + Subscription Bar controls ───────────────
 * Same armor as above: these are native <button>s, so aggressive theme rules
 * (body :is(button, …) { background: <brand> }) repaint them. Re-assert the
 * intended token-driven look with enough force to win.
 */
.content-subscription-notification .primary-btn {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
}

.content-subscription-notification .primary-btn:hover {
	background: var(--ss-primary-dark) !important;
}

.content-subscription-notification .close-notification {
	background: rgba(17, 24, 39, 0.05) !important;
	color: var(--ss-muted) !important;
	border: none !important;
}

.content-subscription-notification .close-notification:hover {
	background: var(--ss-danger-tint) !important;
	color: var(--ss-danger) !important;
}

.content-subscription-notification .secondary-btn {
	background: var(--ss-bg) !important;
	color: var(--ss-muted) !important;
	border: 1px solid var(--ss-border) !important;
}

.content-subscription-notification .secondary-btn:hover {
	color: var(--ss-body) !important;
}

.content-subscription-notification .remind-option {
	background: transparent !important;
	color: var(--ss-ink) !important;
	border: none !important;
}

.content-subscription-notification .remind-option:hover {
	background: var(--ss-primary-tint) !important;
	color: var(--ss-primary) !important;
}

.content-subscription-notification .remind-option.remind-never {
	color: var(--ss-danger) !important;
	border-top: 1px solid var(--ss-border) !important;
}

.content-subscription-notification .remind-option.remind-never:hover {
	background: var(--ss-danger-tint) !important;
}

.multiple-plans-modal .modal-close {
	background: transparent !important;
	color: var(--ss-muted) !important;
	border: none !important;
}

.multiple-plans-modal .modal-close:hover {
	background: var(--ss-bg) !important;
	color: var(--ss-danger) !important;
}

.multiple-plans-modal .subscribe-plan-btn {
	background: var(--ss-primary) !important;
	color: #fff !important;
	border: none !important;
}

.multiple-plans-modal .subscribe-plan-btn:hover {
	background: var(--ss-primary-dark) !important;
}

/* The bar sits on a primary-colored strip; its buttons are translucent white. */
.smart-subscription-bar .subscription-bar-btn.primary {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.smart-subscription-bar .subscription-bar-btn.primary:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

.smart-subscription-bar .subscription-bar-btn.secondary {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.smart-subscription-bar .subscription-bar-btn.secondary:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

.smart-subscription-bar .subscription-bar-btn.success {
	background: var(--ss-danger-tint) !important;
	color: #fff !important;
	border: 1px solid var(--ss-danger) !important;
}

.smart-subscription-bar .subscription-bar-btn.success:hover {
	background: var(--ss-danger) !important;
}

.smart-subscription-bar .subscription-bar-close {
	background: transparent !important;
	color: #fff !important;
	border: none !important;
}

/* Bar text: the heading is an h4, so theme heading colors (near-black ink)
 * override it on the primary-colored strip. Everything on the bar is white. */
.smart-subscription-bar h4,
.smart-subscription-bar p,
.smart-subscription-bar .subscription-icon {
	color: #fff !important;
}