/*
 * Lochaber CSA Manager -- Frontend Dark Mode
 *
 * Token-only overrides via prefers-color-scheme. No structural CSS lives here.
 * All --lcsa-* custom properties are re-declared under the dark media query;
 * the rest of the frontend codebase reads tokens exclusively, so no other
 * files need to change.
 *
 * Palette matches the admin dark mode (Boreal base) adapted for frontend
 * components. Warmth accent is brightened for dark-background contrast.
 *
 * @since 1.0.0
 */

@media (prefers-color-scheme: dark) {

	:root {

		/* ── Core Palette ─────────────────────────────────────────────── */
		--lcsa-atlantic-0: #B8D4E8;
		--lcsa-atlantic-1: #6A9ABC;
		--lcsa-atlantic-2: #7DAEC8;
		--lcsa-warmth-2: #F0B078;
		--lcsa-warmth-1: #EAA853;
		--lcsa-warmth-0: #E4A06E;
		--lcsa-warmth-0-rgb: 228, 160, 110;
		--lcsa-shore-0: #1A2832;
		--lcsa-shore-1: #0F1A22;
		--lcsa-shore-2: #1E3040;
		--lcsa-shore-3: #2E4050;
		--lcsa-granite-1: #B8B0A8;
		--lcsa-granite-3: #908880;
		--lcsa-success: #5BA88A;
		--lcsa-error: #D57B7B;

		/* ── RGB channels (for rgba() usage) ──────────────────────────── */
		--lcsa-boreal-0-rgb: 10, 19, 25;
		--lcsa-atlantic-2-rgb: 125, 174, 200;
		--lcsa-warmth-1-rgb: 234, 168, 83;
		--lcsa-success-rgb: 91, 168, 138;
		--lcsa-error-rgb: 213, 123, 123;

		/* ── Derived tokens ───────────────────────────────────────────── */
		--lcsa-success-bg: rgba(var(--lcsa-success-rgb), 0.14);
		--lcsa-error-bg: rgba(var(--lcsa-error-rgb), 0.14);

		color-scheme: dark;
	}

	/* ── Input autofill override (prevent bright yellow flash) ──────────── */
	.lcsa-modification-form input:-webkit-autofill,
	.lcsa-modification-form input:-webkit-autofill:focus,
	.lcsa-modification-form select:-webkit-autofill,
	.lcsa-modification-form textarea:-webkit-autofill,
	.lcsa-signup-form input:-webkit-autofill,
	.lcsa-signup-form input:-webkit-autofill:focus,
	.lcsa-signup-form select:-webkit-autofill,
	.lcsa-signup-form textarea:-webkit-autofill {
		-webkit-box-shadow: 0 0 0 1000px #243440 inset;
		-webkit-text-fill-color: #E0E8EE;
	}

	/* ── Submit / CTA button text stays legible on accent background ───── */
	.lcsa-modification-form .lcsa-submit-btn,
	.lcsa-signup-form .lcsa-submit-btn,
	.lcsa-bb-btn-swap,
	.lcsa-dash-action-link,
	.lcsa-addon-confirm-btn {
		color: #0F1A22;
	}

	/* ── Signup form — ensure select dropdowns read correctly ──────────── */
	.lcsa-signup-form select {
		color-scheme: dark;
	}

	/* ── Form result (gift shares, referrals) ─────────────────────────── */
	.lcsa-form-result.info {
		background: rgba(var(--lcsa-atlantic-2-rgb), 0.14);
	}

	/* ── Swap close button border refinement ───────────────────────────── */
	.lcsa-bb-swap-close {
		background: var(--lcsa-shore-2);
		border-color: var(--lcsa-shore-3);
	}

	.lcsa-bb-swap-close:hover {
		background: var(--lcsa-shore-3);
	}

	/* ── History accordion summary hover ───────────────────────────────── */
	.lcsa-bb-history-summary:hover {
		background: var(--lcsa-shore-2);
	}

	/* ── History accordion chevron — lighten for dark bg ────────────────── */
	.lcsa-bb-history-summary::before {
		border-right-color: var(--lcsa-granite-1);
		border-bottom-color: var(--lcsa-granite-1);
	}

	/* ── Quantity control refinement ───────────────────────────────────── */
	.lcsa-addon-qty-btn {
		background: var(--lcsa-shore-2);
	}

	.lcsa-addon-qty-btn:hover {
		background: var(--lcsa-shore-3);
	}

	.lcsa-addon-qty-input {
		background: var(--lcsa-shore-0);
		border-left-color: var(--lcsa-shore-3);
		border-right-color: var(--lcsa-shore-3);
	}

	/* ── Overstock badge — keep legible on dark card images ─────────────── */
	.lcsa-addon-overstock-badge {
		box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.35));
	}

	/* ── Card image placeholder bg ─────────────────────────────────────── */
	.lcsa-addon-card-image,
	.lcsa-addon-card__image {
		background: var(--lcsa-shore-2);
	}

	/* ── Print: revert to light for paper ──────────────────────────────── */
	/* Rynue Memberships checkout integration */
	.rynue-checkout__form .rynue-checkout-section,
	.rynue-checkout__form .lcsa-addon-freq-card,
	.lcsa-cpt-addon-card,
	#lcsa-order-summary-lines {
		background: var(--rynue--color--surface, var(--lcsa-boreal-1, #1A2832));
		border-color: var(--rynue--color--border, rgba(255, 255, 255, 0.1));
	}

	.lcsa-cpt-addon-card:hover,
	.rynue-checkout__form .lcsa-addon-freq-card label:hover {
		background: rgba(255, 255, 255, 0.04);
	}

	#lcsa_delivery_fee_notice .rynue-notice--info {
		background: rgba(43, 87, 125, 0.12);
		border-color: rgba(43, 87, 125, 0.25);
	}

	.lcsa-ns-loyal-checkout-hint {
		background: rgba(74, 139, 110, 0.12);
		border-color: rgba(74, 139, 110, 0.25);
	}

	/* ── Dashboard cards, panels, and form sections ───────────────────── */
	.lcsa-dash-card,
	.lcsa-addon-card,
	.lcsa-bb-item,
	.lcsa-bb-swap-panel,
	.lcsa-bb-history-week,
	.lcsa-bb-base-item,
	.lcsa-bb-extra-card,
	.lcsa-bb-extras-summary,
	.lcsa-dash-mods li,
	.lcsa-product-card,
	.lcsa-share-card-inner,
	.lcsa-payment-option-inner,
	.lcsa-addon-freq-card {
		background: var(--lcsa-shore-0);
		border-color: var(--lcsa-shore-3);
	}

	/* ── Section backgrounds (shore-1 on light -> boreal equivalent) ──── */
	.lcsa-member-info,
	.lcsa-bb-next-week,
	.lcsa-bb-extras-panel,
	.lcsa-skip-section,
	.lcsa-order-summary,
	.lcsa-addon-cart,
	.lcsa-bb-location-override,
	.lcsa-payment-instructions,
	.lcsa-bb-notice-info,
	.lcsa-addon-card__image,
	.lcsa-dash-week-label,
	.lcsa-bb-history-count,
	.lcsa-bb-next-week-date,
	.lcsa-addon-soldout-badge,
	.lcsa-addon-limit-indicator,
	.lcsa-status-unclaimed,
	.lcsa-status-rescheduled,
	.lcsa-status-donated,
	.lcsa-ns-loyal-banner {
		background: var(--lcsa-shore-2);
		border-color: var(--lcsa-shore-3);
	}

	/* ── Dark card icon backgrounds ───────────────────────────────────── */
	.lcsa-dash-card-icon {
		background: rgba(106, 154, 188, 0.14);
	}

	/* ── Form fields — inputs, selects, textareas on dark ─────────────── */
	.lcsa-modification-form select,
	.lcsa-modification-form input[type="text"],
	.lcsa-modification-form input[type="date"],
	.lcsa-modification-form textarea,
	.lcsa-signup-section input[type="text"],
	.lcsa-signup-section input[type="email"],
	.lcsa-signup-section input[type="tel"],
	.lcsa-signup-section select,
	.lcsa-signup-section textarea,
	.lcsa-bb-protein-input,
	.lcsa-bb-extra-input,
	.lcsa-makeup-date,
	.lcsa-addon-qty-input {
		background: var(--lcsa-shore-0);
		color: #E0E8EE;
		border-color: var(--lcsa-shore-3);
	}

	/* ── Headings, labels, strong text on dark ─────────────────────────── */
	.lcsa-modification-form h2,
	.lcsa-modification-form h3,
	.lcsa-bb-header h2,
	.lcsa-bb-contents h3,
	.lcsa-bb-swap-header h3,
	.lcsa-bb-swap-replacing strong,
	.lcsa-bb-subscription-overview h3,
	.lcsa-bb-extras-panel h3,
	.lcsa-bb-next-week-header h3,
	.lcsa-bb-history-heading,
	.lcsa-dash-greeting h2,
	.lcsa-dash-card-title,
	.lcsa-dash-value,
	.lcsa-dash-schedule-date,
	.lcsa-dash-item-name,
	.lcsa-dash-mod-type,
	.lcsa-addon-header h2,
	.lcsa-addon-card__name,
	.lcsa-order-summary h3,
	.lcsa-skip-section h4,
	.lcsa-makeup-section h5,
	.lcsa-bb-item-name,
	.lcsa-bb-base-item__name,
	.lcsa-bb-extra-card__name,
	.lcsa-bb-extras-summary h4,
	.lcsa-bb-extras-line__amount,
	.lcsa-bb-extras-total-line,
	.lcsa-summary-total,
	.lcsa-addon-cart__title,
	.lcsa-addon-cart__item-name,
	.lcsa-addon-cart__item-total,
	.lcsa-addon-cart__total-label,
	.lcsa-member-info strong,
	.lcsa-bb-swap-opt-name,
	.lcsa-payment-option-name,
	.lcsa-share-card-name,
	.lcsa-store-section-title,
	.lcsa-product-card__name,
	.lcsa-lcsa-dash-payment-banner-title,
	.lcsa-addon-qty-btn,
	.lcsa-empty-heading,
	.lcsa-dash-payment-banner-instructions strong {
		color: var(--lcsa-atlantic-0);
	}

	/* ── Secondary/muted text on dark ─────────────────────────────────── */
	.lcsa-bb-history-summary {
		color: var(--lcsa-atlantic-0);
	}

	.lcsa-bb-history-summary:hover {
		background: var(--lcsa-shore-2);
	}

	/* ── Border colours on dark — dividers ─────────────────────────────── */
	.lcsa-dash-box-list li,
	.lcsa-dash-schedule-item,
	.lcsa-bb-history-item,
	.lcsa-addon-compact-list li,
	.lcsa-bb-category-label,
	.lcsa-bb-next-week-header,
	.lcsa-modification-form h2,
	.lcsa-modification-form h3,
	.lcsa-signup-form legend,
	.lcsa-addon-freq-card-header,
	.lcsa-addon-cart__item,
	.lcsa-bb-extras-line,
	.lcsa-summary-line + .lcsa-summary-line,
	.lcsa-bb-extra-card__billing,
	.lcsa-lcsa-form-actions,
	.lcsa-makeup-section,
	.lcsa-bb-extras-summary-total {
		border-color: var(--lcsa-shore-3);
	}

	/* ── Action links on dark ─────────────────────────────────────────── */
	.lcsa-dash-action-link {
		color: var(--lcsa-atlantic-1);
		background: rgba(125, 174, 200, 0.1);
		border-color: rgba(125, 174, 200, 0.25);
	}

	.lcsa-dash-action-link:hover {
		background: rgba(125, 174, 200, 0.18);
		color: var(--lcsa-atlantic-0);
	}

	/* ── Dashboard login / no-membership empty states ─────────────────── */
	.lcsa-dashboard-login,
	.lcsa-dashboard-no-membership {
		background: var(--lcsa-shore-0);
		border-color: var(--lcsa-shore-3);
		color: var(--lcsa-granite-1);
	}

	/* ── Swap option pills on dark ────────────────────────────────────── */
	.lcsa-bb-swap-option {
		background: var(--lcsa-shore-2);
		border-color: var(--lcsa-shore-3);
	}

	.lcsa-bb-swap-option:hover {
		border-color: var(--lcsa-atlantic-2);
		background: var(--lcsa-shore-0);
	}

	/* ── Product card buttons on dark ─────────────────────────────────── */
	.lcsa-product-card__btn {
		border-color: var(--lcsa-atlantic-1);
		color: var(--lcsa-atlantic-1);
	}

	.lcsa-product-card__btn:hover {
		background: var(--lcsa-atlantic-1);
		color: #0F1A22;
	}

	.lcsa-product-card__btn--cta:hover {
		color: #0F1A22;
	}

	/* ── Product card shadow on dark ──────────────────────────────────── */
	.lcsa-product-card:hover {
		box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.3));
	}

	/* ── NS Loyal banner gradient on dark ─────────────────────────────── */
	.lcsa-ns-loyal-banner {
		background: linear-gradient(135deg, var(--bg-secondary, #1A2832) 0%, var(--bg-tertiary, #1E3040) 100%);
	}

	/* ── Farm store title / subtitle ──────────────────────────────────── */
	.lcsa-store-title {
		color: var(--lcsa-atlantic-1);
	}

	.lcsa-store-subtitle {
		color: var(--lcsa-granite-1);
	}

	/* ── Product card price on dark ───────────────────────────────────── */
	.lcsa-product-card__price {
		color: var(--lcsa-atlantic-1);
	}

	/* ── Select dropdown arrow on dark ────────────────────────────────── */
	.lcsa-bb-location-override .lcsa-select {
		background-color: var(--lcsa-shore-0);
		color: var(--lcsa-atlantic-0);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%237B8C99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	}

	/* ── Print: revert to light for paper ──────────────────────────────── */
	@media print {

		:root {
			--lcsa-shore-0: #fff;
			--lcsa-shore-1: #F8F6F2;
			--lcsa-atlantic-0: #1A3548;
			--lcsa-granite-1: #3C4A56;
			--lcsa-shore-3: #E0D8D0;
			--lcsa-boreal-0-rgb: 15, 26, 34;
			color-scheme: light;
		}
	}
}