/**
 * VellyWay Dark Mode Design Tokens
 *
 * Inverted color palette for dark mode with accessible contrast ratios.
 * Applied when @media (prefers-color-scheme: dark) OR [data-color-scheme="dark"]
 *
 * @package VellyWay
 * @since   3.0.0
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) {
		/* Invert primary text & background */
		--wp--preset--color--vw-charcoal: #FFFFFF;
		--wp--preset--color--vw-white: #111111;
		--wp--preset--color--vw-off-white: #1A1A1A;

		/* Lighten teal for dark mode contrast (WCAG AA ≥ 4.5:1) */
		--wp--preset--color--vw-teal: #4DD9F3;
		--wp--preset--color--vw-teal-light: #7DE9FF;
		--wp--preset--color--vw-teal-dark: #0B8BA3;

		/* Darken sand for dark mode */
		--wp--preset--color--vw-sand: #3D3226;
		--wp--preset--color--vw-sand-light: #5C4A3C;
		--wp--preset--color--vw-sand-dark: #2A2319;

		/* Adjust terracotta brightness for dark mode */
		--wp--preset--color--vw-terracotta: #E8A365;
		--wp--preset--color--vw-terracotta-light: #F0B880;
		--wp--preset--color--vw-terracotta-dark: #C27A44;

		/* Invert grays */
		--wp--preset--color--vw-gray-50: #1A1A1A;
		--wp--preset--color--vw-gray-100: #222222;
		--wp--preset--color--vw-gray-300: #555555;
		--wp--preset--color--vw-gray-500: #AAAAAA;
		--wp--preset--color--vw-gray-700: #D0D0D0;

		/* Adjust brand colors for dark mode contrast */
		--wp--preset--color--brand-1ba: #8E7DD8;
		--wp--preset--color--brand-brandmover: #4DD9C8;
		--wp--preset--color--brand-relefi: #E8A365;
		--wp--preset--color--brand-auraos: #FF6B9D;
		--wp--preset--color--brand-vellyway: #FFD700;
		--wp--preset--color--brand-artsmover: #FFB366;

		/* Adjust shadows for dark mode (darker = more prominent) */
		--vw-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
		--vw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
		--vw-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
		--vw-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6), 0 4px 6px rgba(0, 0, 0, 0.4);
		--vw-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7), 0 8px 10px rgba(0, 0, 0, 0.5);
		--vw-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.8), 0 12px 20px rgba(0, 0, 0, 0.6);
		--vw-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
		--vw-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
	}

	/* Ensure form fields are readable in dark mode */
	input:not([type="checkbox"]):not([type="radio"]),
	textarea,
	select {
		background-color: var(--wp--preset--color--vw-gray-100);
		color: var(--wp--preset--color--vw-charcoal);
		border-color: var(--wp--preset--color--vw-gray-300);
	}

	/* Placeholder text visibility */
	input::placeholder,
	textarea::placeholder {
		color: var(--wp--preset--color--vw-gray-500);
		opacity: 0.7;
	}

	/* Links in dark mode */
	a {
		color: var(--wp--preset--color--vw-teal);
	}

	a:hover {
		color: var(--wp--preset--color--vw-terracotta);
	}

	/* Code blocks */
	pre,
	code {
		background-color: var(--wp--preset--color--vw-gray-100);
		color: var(--wp--preset--color--vw-charcoal);
	}

	/* Blockquotes */
	blockquote {
		border-color: var(--wp--preset--color--vw-terracotta);
		color: var(--wp--preset--color--vw-teal);
	}

	/* Prevent image overexposure in dark mode */
	img {
		opacity: 0.95;
	}

	/* Table styling for dark mode */
	table {
		border-color: var(--wp--preset--color--vw-gray-300);
	}

	tr:nth-child(odd) {
		background-color: rgba(255, 255, 255, 0.02);
	}

	th {
		background-color: var(--wp--preset--color--vw-gray-100);
		color: var(--wp--preset--color--vw-charcoal);
	}
}

/* User-toggled dark mode (via [data-color-scheme] attribute for JS override) */
:root[data-color-scheme="dark"] {
	/* Same inversions as above — allows JS toggle to override system preference */
	--wp--preset--color--vw-charcoal: #FFFFFF;
	--wp--preset--color--vw-white: #111111;
	--wp--preset--color--vw-off-white: #1A1A1A;

	--wp--preset--color--vw-teal: #4DD9F3;
	--wp--preset--color--vw-teal-light: #7DE9FF;
	--wp--preset--color--vw-teal-dark: #0B8BA3;

	--wp--preset--color--vw-sand: #3D3226;
	--wp--preset--color--vw-sand-light: #5C4A3C;
	--wp--preset--color--vw-sand-dark: #2A2319;

	--wp--preset--color--vw-terracotta: #E8A365;
	--wp--preset--color--vw-terracotta-light: #F0B880;
	--wp--preset--color--vw-terracotta-dark: #C27A44;

	--wp--preset--color--vw-gray-50: #1A1A1A;
	--wp--preset--color--vw-gray-100: #222222;
	--wp--preset--color--vw-gray-300: #555555;
	--wp--preset--color--vw-gray-500: #AAAAAA;
	--wp--preset--color--vw-gray-700: #D0D0D0;

	--wp--preset--color--brand-1ba: #8E7DD8;
	--wp--preset--color--brand-brandmover: #4DD9C8;
	--wp--preset--color--brand-relefi: #E8A365;
	--wp--preset--color--brand-auraos: #FF6B9D;
	--wp--preset--color--brand-vellyway: #FFD700;
	--wp--preset--color--brand-artsmover: #FFB366;

	--vw-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
}

:root[data-color-scheme="light"] {
	/* Fully restore every token that the dark block overrides.
	   Required when OS prefers dark but user has explicitly chosen light. */
	--wp--preset--color--vw-charcoal:          #111111;
	--wp--preset--color--vw-white:             #FFFFFF;
	--wp--preset--color--vw-off-white:         #FAFAF8;

	--wp--preset--color--vw-teal:              #0F3C4C;
	--wp--preset--color--vw-teal-light:        #1A5A6E;
	--wp--preset--color--vw-teal-dark:         #082A36;

	--wp--preset--color--vw-sand:              #F3E4D4;
	--wp--preset--color--vw-sand-light:        #FAF4ED;
	--wp--preset--color--vw-sand-dark:         #D9C4AE;

	--wp--preset--color--vw-terracotta:        #9B451B;
	--wp--preset--color--vw-terracotta-light:  #D4805C;
	--wp--preset--color--vw-terracotta-dark:   #803410;

	--wp--preset--color--vw-gray-50:           #F7F7F8;
	--wp--preset--color--vw-gray-100:          #EEEEEF;
	--wp--preset--color--vw-gray-300:          #B8B8BC;
	--wp--preset--color--vw-gray-500:          #57575E;
	--wp--preset--color--vw-gray-700:          #333338;

	--wp--preset--color--brand-1ba:            #534AB7;
	--wp--preset--color--brand-brandmover:     #085041;
	--wp--preset--color--brand-relefi:         #712B13;
	--wp--preset--color--brand-auraos:         #72243E;
	--wp--preset--color--brand-vellyway:       #0F3C4C;
	--wp--preset--color--brand-artsmover:      #445566;

	--vw-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
}

/* Smooth transition for theme switching (CSS-only, no layout shift) */
:root {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure sufficient contrast on interactive elements */
@media (prefers-color-scheme: dark) {
	button,
	.button,
	[role="button"],
	.wp-block-button__link {
		contrast: 1.1;
	}

	/* Focused elements must be clearly visible */
	*:focus-visible {
		outline: 2px solid var(--wp--preset--color--vw-teal);
		outline-offset: 2px;
	}
}