/*
 * Rynue Memberships — Frontend Dark Mode
 *
 * Token-only overrides via prefers-color-scheme. No structural CSS lives here.
 * All --rynue--color--* 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 CTA is brightened for dark-background contrast.
 *
 * @since 1.0.0
 */

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

	:root {

		/* ── Backgrounds ────────────────────────────────────────────────── */
		--rynue--color--base: #0f1a22;
		--rynue--color--surface: #162433;
		--rynue--color--surface-raised: rgba(255, 255, 255, 0.03);

		/* ── Text ───────────────────────────────────────────────────────── */
		--rynue--color--text-primary: #ebe8e4;
		--rynue--color--text-secondary: #b8c0c8;
		--rynue--color--text-muted: #7b8c99;

		/* ── Interactive / Accent ────────────────────────────────────────── */
		--rynue--color--accent: #5b9ac4;
		--rynue--color--accent-hover: #7bb3d6;   /* lightened for dark bg */
		--rynue--color--accent-light: rgba(91, 154, 196, 0.12);
		--rynue--color--cta: #e09a72;
		--rynue--color--cta-hover: #e8ad8b;

		/* ── Borders ────────────────────────────────────────────────────── */
		--rynue--color--border: #243444;
		--rynue--color--border-focus: #5b9ac4;

		/* ── Status colours ─────────────────────────────────────────────── */
		--rynue--color--success: #52b788;
		--rynue--color--success-light: rgba(82, 183, 136, 0.14);
		--rynue--color--warning: #e09a72;
		--rynue--color--warning-light: rgba(224, 154, 114, 0.14);
		--rynue--color--error: #e87070;
		--rynue--color--error-light: rgba(232, 112, 112, 0.14);
		--rynue--color--error-border: rgba(232, 112, 112, 0.28);  /* danger btn border on dark */
		--rynue--color--surface-overlay: rgba(255, 255, 255, 0.12);  /* badge on accent bg, dark */

		/* ── Shadows (deeper for dark backgrounds) ──────────────────────── */
		--rynue--shadow--sm: 1px 2px 8px  rgba(0, 0, 0, 0.25);
		--rynue--shadow--md: 4px 8px 24px rgba(0, 0, 0, 0.35);
		--rynue--shadow--lg: 8px 16px 40px rgba(0, 0, 0, 0.45);
		--rynue--shadow--focus: 0 0 0 3px rgba(91, 154, 196, 0.35);

		/* ── Paper texture (increase opacity — near-invisible on dark) ───── */
		--rynue--texture--opacity: 0.05;

		color-scheme: dark;
	}

	/* ── Input autofill override (prevent bright yellow flash) ──────────── */
	.rynue-input:-webkit-autofill,
	.rynue-input:-webkit-autofill:focus,
	.rynue-textarea:-webkit-autofill {
		-webkit-box-shadow: 0 0 0 1000px #162433 inset;
		-webkit-text-fill-color: #ebe8e4;
	}

	/* ── Select arrow (dark variant) ───────────────────────────────────── */
	.rynue-select {
		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");
	}

	/* ── CTA button text stays dark on brightened orange ────────────────── */
	.rynue-btn--primary,
	.rynue-btn--cta {
		color: #1a2830;
	}

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

		:root {
			--rynue--color--base: #fff;
			--rynue--color--surface: #fff;
			--rynue--color--text-primary: #1a3548;
			--rynue--color--border: #e0d8d0;
			color-scheme: light;
		}
	}
}