/**
 * Landing Pages - Dark Mode Contrast Fixes
 * WCAG AA compliant (4.5:1 for text, 3:1 for large text/UI)
 *
 * This file addresses contrast issues across ALL landing pages when
 * prefers-color-scheme: dark is active (before JavaScript adds .dark class).
 *
 * Coverage:
 * - /landing (Main Landing)
 * - /landing/keyboard (Keyboard Landing)
 *
 * Color Reference (WCAG AA on dark backgrounds):
 * - #F5F5F5: Primary text (11:1 contrast on #15181C)
 * - #E0E0E0: Secondary text (9.2:1 contrast)
 * - #CCCCCC: Tertiary text (7.8:1 contrast)
 * - #A6A6A6: Muted text (5.5:1 contrast) - minimum for small text
 * - #888888: Disabled/placeholder (4.5:1 contrast)
 */

@media (prefers-color-scheme: dark) {
	/* ============================================
	 * GLOBAL PAGE STYLES
	 * ============================================ */

	/* Override CSS variables at :root level for dark mode preference */
	/* Only apply before theme system hydrates (adds .light or .dark class) */
	:root:not(.light):not(.dark) {
		--text-primary: #F5F5F5;
		--text-secondary: #CCCCCC;
		--surface-card: #1F2429;
		--surface-interactive: #262C32;
		--surface-elevated: #2A3038;
		--border-color-default: #383E45;
		--border-color-strong: #4B5563;
	}

	/* Base page background - only when no custom theme is active */
	:root:not([data-theme]) body,
	:root:not([data-theme]) .landing-page,
	:root:not([data-theme]) .keyboard-showcase {
		background-color: #15181C !important;
		color: #F5F5F5 !important;
	}

	/* Override CSS custom properties in keyboard-showcase */
	.keyboard-showcase {
		--color-primary: #26a69a;
		--color-primary-dark: #1e8a80;
		--color-accent: #f59e0b;
		--color-danger: #ef4444;
		--text-primary: #F5F5F5;
		--text-secondary: #CCCCCC;
		--surface-background: #15181C;
		--surface-alt: #1a1d21;
		--border-color: #383E45;
	}

	/* Force dark backgrounds on ALL keyboard landing sections */
	.keyboard-showcase .hero-section,
	.keyboard-showcase .problem-section,
	.keyboard-showcase .voice-section,
	.keyboard-showcase .smart-section,
	.keyboard-showcase .persona-section,
	.keyboard-showcase .accessibility-section,
	.keyboard-showcase .comparison-section,
	.keyboard-showcase .demo-section,
	.keyboard-showcase .social-section,
	.keyboard-showcase .final-cta-section,
	.keyboard-showcase .showcase-footer {
		background-color: #15181C !important;
	}

	/* Alternating section backgrounds for visual hierarchy */
	.keyboard-showcase .problem-section,
	.keyboard-showcase .smart-section,
	.keyboard-showcase .accessibility-section,
	.keyboard-showcase .social-section {
		background-color: #1a1d21 !important;
	}

	.keyboard-showcase .hero-section {
		background: linear-gradient(180deg, #15181C 0%, #1a1d21 100%) !important;
	}

	.keyboard-showcase .final-cta-section {
		background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
	}

	/* Force text colors in keyboard showcase */
	.keyboard-showcase .section-title,
	.keyboard-showcase .section-subtitle,
	.keyboard-showcase h1,
	.keyboard-showcase h2,
	.keyboard-showcase h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase p,
	.keyboard-showcase .section-subtitle {
		color: #CCCCCC !important;
	}

	/* Cards in keyboard showcase */
	.keyboard-showcase .problem-card,
	.keyboard-showcase .class-card,
	.keyboard-showcase .persona-card,
	.keyboard-showcase .a11y-card,
	.keyboard-showcase .testimonial-card,
	.keyboard-showcase .comparison-table {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .problem-card h3,
	.keyboard-showcase .class-card h3,
	.keyboard-showcase .persona-card h3,
	.keyboard-showcase .a11y-card h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .problem-card p,
	.keyboard-showcase .class-card p,
	.keyboard-showcase .persona-card p,
	.keyboard-showcase .a11y-card p,
	.keyboard-showcase .testimonial-card blockquote {
		color: #CCCCCC !important;
	}

	/* Emotional narrative box */
	.keyboard-showcase .emotional-narrative {
		background: #1F2429 !important;
		color: #CCCCCC !important;
		border-left-color: #26a69a !important;
	}

	/* Tone generation demo */
	.keyboard-showcase .tone-generation-demo {
		background: linear-gradient(135deg, rgba(38, 166, 154, 0.1), rgba(38, 166, 154, 0.05)) !important;
		border-color: rgba(38, 166, 154, 0.3) !important;
	}

	.keyboard-showcase .tone-demo-header {
		color: #26a69a !important;
	}

	.keyboard-showcase .tone-theme-chip {
		background: #262C32 !important;
		border-color: #383E45 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .theme-name {
		color: #F5F5F5 !important;
	}

	/* Tone chips */
	.keyboard-showcase .tone-chip {
		background: #262C32 !important;
		color: #CCCCCC !important;
	}

	/* Word chips - WCAG AA compliant on dark */
	.keyboard-showcase .word-chip,
	.keyboard-showcase .suggested-words .word-chip {
		background: #1e3a30 !important;
		color: #A7F3D0 !important;
	}

	/* Class cards in smart section */
	.keyboard-showcase .class-card,
	.class-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .class-header,
	.keyboard-showcase .class-header span,
	.class-header,
	.class-header span {
		color: #F5F5F5 !important;
	}

	/* Voice comparison player text */
	.keyboard-showcase .voice-comparison-player p,
	.keyboard-showcase .voice-comparison p,
	.keyboard-showcase #demo p,
	.keyboard-showcase [id="demo"] p,
	.keyboard-showcase .voice-section p {
		color: #F5F5F5 !important;
	}

	/* Demo section text */
	.keyboard-showcase .demo-section p,
	.keyboard-showcase .demo-section .section-subtitle,
	.keyboard-showcase .demo-upgrade {
		color: #CCCCCC !important;
	}

	/* Sample text in voice demos */
	.keyboard-showcase .sample-text,
	.keyboard-showcase .voice-sample-text,
	.keyboard-showcase [class*="sample"] {
		color: #F5F5F5 !important;
	}

	/* Voice comparison component */
	.keyboard-showcase .voice-comparison,
	.voice-comparison {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	/* Comparison phrase - the demo text */
	.keyboard-showcase .comparison-phrase,
	.comparison-phrase {
		background: #1F2429 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	/* Voice buttons styling */
	.keyboard-showcase .voice-button,
	.voice-button {
		background: #262C32 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .button-label,
	.voice-button .button-label {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .button-desc,
	.voice-button .button-desc {
		color: #CCCCCC !important;
	}

	/* VS divider */
	.keyboard-showcase .vs-divider,
	.vs-divider {
		color: #A6A6A6 !important;
	}

	/* Keyboard demo lite component */
	.keyboard-showcase .keyboard-demo,
	.keyboard-demo {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	/* Demo callout - "Tap any word..." */
	.keyboard-showcase .demo-callout,
	.demo-callout {
		background: #262C32 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .demo-callout p,
	.keyboard-showcase .callout-content p,
	.demo-callout p,
	.callout-content p {
		color: #CCCCCC !important;
	}

	/* Voice selector */
	.keyboard-showcase .voice-selector,
	.voice-selector {
		background: #262C32 !important;
	}

	.keyboard-showcase .voice-label,
	.voice-label {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .voice-option,
	.voice-option {
		background: #1F2429 !important;
		border-color: #383E45 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .voice-option:hover,
	.voice-option:hover {
		border-color: #26a69a !important;
	}

	/* Word grid buttons */
	.keyboard-showcase .word-button,
	.word-button {
		background: #262C32 !important;
		border-color: #383E45 !important;
		color: #F5F5F5 !important;
	}

	/* Category tabs */
	.keyboard-showcase .category-tab,
	.category-tab {
		background: #262C32 !important;
		color: #CCCCCC !important;
	}

	.keyboard-showcase .category-tab.active,
	.category-tab.active {
		background: #26a69a !important;
		color: #FFFFFF !important;
	}

	/* Comparison table */
	.keyboard-showcase .comparison-header {
		background: #262C32 !important;
	}

	.keyboard-showcase .comparison-header > div {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .comparison-row {
		border-color: #383E45 !important;
	}

	.keyboard-showcase .comparison-row .col-feature {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .comparison-row .col-cocovox {
		color: #26a69a !important;
	}

	.keyboard-showcase .comparison-row .col-others {
		color: #888888 !important;
	}

	/* Accessibility promise banner */
	.keyboard-showcase .a11y-promise {
		background: linear-gradient(135deg, #26a69a 0%, #2bb5a8 100%) !important;
		color: #FFFFFF !important;
	}

	/* Main landing page dark mode now handled by CSS variables in ms365-cocovox.css */

	/* ============================================
	 * KEYBOARD LANDING (/landing/keyboard) ONLY
	 * All rules scoped to .keyboard-showcase
	 * Main landing (/landing) uses CSS variables via ms365-cocovox.css
	 * ============================================ */

	/* Hero */
	.keyboard-showcase .hero-section {
		background-color: #15181C !important;
	}

	.keyboard-showcase .hero-badge {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .hero-badge span {
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .hero-title {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .hero-subtitle {
		color: #E0E0E0 !important;
	}

	.keyboard-showcase .hero-note {
		color: #A6A6A6 !important;
	}

	.keyboard-showcase .hero-breadcrumb {
		color: #A6A6A6 !important;
	}

	.keyboard-showcase .hero-breadcrumb:hover {
		color: #CCCCCC !important;
	}

	/* Problem section */
	.keyboard-showcase .problem-section {
		background-color: #1a1d21 !important;
	}

	.keyboard-showcase .problem-headline {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .problem-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .problem-card h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .problem-card p {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .problem-icon {
		color: #F87171 !important;
	}

	.keyboard-showcase .problem-content p,
	.keyboard-showcase .problem-section p {
		color: #CCCCCC !important;
	}

	/* Demo section */
	.keyboard-showcase .demo-section {
		background-color: #15181C !important;
	}

	.keyboard-showcase .demo-title {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .vs-text,
	.keyboard-showcase .comparison-vs {
		color: #A6A6A6 !important;
	}

	.keyboard-showcase .comparison-table {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .comparison-table th {
		background: #262C32 !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .comparison-table td {
		color: #CCCCCC !important;
		border-color: #383E45 !important;
	}

	/* Smart section */
	.keyboard-showcase .smart-section {
		background-color: #1a1d21 !important;
	}

	.keyboard-showcase .smart-section h2 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .smart-section p {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .smart-badge,
	.keyboard-showcase .ai-badge,
	.keyboard-showcase .smart-section .badge {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	/* Persona section */
	.keyboard-showcase .persona-section {
		background-color: #15181C !important;
	}

	.keyboard-showcase .persona-section h2 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .persona-section p {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .tone-theme,
	.keyboard-showcase .persona-card,
	.keyboard-showcase .theme-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .tone-theme-name,
	.keyboard-showcase .persona-card h3,
	.keyboard-showcase .theme-card h3 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .tone-theme-desc,
	.keyboard-showcase .persona-card p,
	.keyboard-showcase .theme-card p {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .tone-badge {
		color: #CCCCCC !important;
	}

	/* Accessibility section */
	.keyboard-showcase .accessibility-section {
		background-color: #1a1d21 !important;
	}

	.keyboard-showcase .accessibility-section h2 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .accessibility-section p {
		color: #CCCCCC !important;
	}

	.keyboard-showcase .accessibility-badge,
	.keyboard-showcase .wcag-badge {
		background: rgba(45, 91, 62, 0.3) !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .accessibility-badge span {
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .accessibility-feature,
	.keyboard-showcase .accessibility-card {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .accessibility-feature h3,
	.keyboard-showcase .accessibility-card-title {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .accessibility-feature p,
	.keyboard-showcase .accessibility-card-description {
		color: #CCCCCC !important;
	}

	/* Final CTA section */
	.keyboard-showcase .final-cta-section {
		background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
	}

	.keyboard-showcase .final-cta-title,
	.keyboard-showcase .final-cta-section h2 {
		color: #F5F5F5 !important;
	}

	.keyboard-showcase .final-cta-subtitle,
	.keyboard-showcase .final-cta-section p {
		color: #E0E0E0 !important;
	}

	/* Keyboard showcase header/footer/nav */
	.showcase-header {
		background-color: rgba(21, 24, 28, 0.95) !important;
		border-bottom-color: #383E45 !important;
	}

	.showcase-header.scrolled {
		background-color: rgba(21, 24, 28, 0.98) !important;
	}

	/* Keyboard showcase buttons */
	.keyboard-showcase .cta-button.primary {
		background: #059669 !important;
		color: #F5F5F5 !important;
		border-color: #059669 !important;
	}

	.keyboard-showcase .cta-button.primary:hover {
		background: #047857 !important;
	}

	.keyboard-showcase .cta-button.secondary {
		background: transparent !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.keyboard-showcase .cta-button.secondary:hover {
		border-color: #059669 !important;
		color: #10B981 !important;
	}

	/* Keyboard preview */
	.keyboard-preview {
		background: #1F2429 !important;
		border-color: #383E45 !important;
	}

	.keyboard-preview-header {
		background: #262C32 !important;
	}

	.preview-words .word-bubble,
	.keyboard-demo-word {
		background: #262C32 !important;
		color: #CCCCCC !important;
		border-color: #383E45 !important;
	}

	.preview-words .word-bubble.accent {
		background: rgba(45, 91, 62, 0.3) !important;
		color: #A7F3D0 !important;
		border-color: rgba(45, 91, 62, 0.5) !important;
	}

	.preview-output {
		background: #15181C !important;
		color: #F5F5F5 !important;
		border-color: #383E45 !important;
	}

	.speaking-icon {
		color: #10B981 !important;
	}

	/* Section badges inside keyboard showcase */
	.keyboard-showcase .section-badge,
	.keyboard-showcase .hero-badge {
		background: rgba(45, 91, 62, 0.4) !important;
		border: 1px solid rgba(167, 243, 208, 0.4) !important;
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .section-badge span,
	.keyboard-showcase .hero-badge span {
		color: #A7F3D0 !important;
	}

	.keyboard-showcase .section-badge svg,
	.keyboard-showcase .hero-badge svg {
		color: #A7F3D0 !important;
	}
}

/* ============================================
 * APP-LEVEL DARK MODE (.dark class)
 *
 * Mirrors the critical styles from the @media block above for cases where
 * the user selected a dark theme in-app but their OS prefers light mode.
 * Without this, the @media (prefers-color-scheme: dark) styles won't apply.
 * ============================================ */

/* Root variables - :where() for zero specificity so theme-specific selectors win */
:where(:root).dark {
	--text-primary: #F5F5F5;
	--text-secondary: #CCCCCC;
	--surface-card: #1F2429;
	--surface-interactive: #262C32;
	--surface-elevated: #2A3038;
	--border-color-default: #383E45;
	--border-color-strong: #4B5563;
}

/* Page backgrounds - only when no custom theme is active */
.dark:not([data-theme]) body,
.dark:not([data-theme]) .landing-page,
.dark:not([data-theme]) .keyboard-showcase {
	background-color: #15181C !important;
	color: #F5F5F5 !important;
}

.dark .keyboard-showcase {
	--color-primary: #26a69a;
	--color-primary-dark: #1e8a80;
	--color-accent: #f59e0b;
	--color-danger: #ef4444;
	--text-primary: #F5F5F5;
	--text-secondary: #CCCCCC;
	--surface-background: #15181C;
	--surface-alt: #1a1d21;
	--border-color: #383E45;
}

/* Section backgrounds */
.dark .keyboard-showcase .hero-section,
.dark .keyboard-showcase .voice-section,
.dark .keyboard-showcase .persona-section,
.dark .keyboard-showcase .demo-section,
.dark .keyboard-showcase .final-cta-section,
.dark .keyboard-showcase .showcase-footer {
	background-color: #15181C !important;
}

.dark .keyboard-showcase .problem-section,
.dark .keyboard-showcase .smart-section,
.dark .keyboard-showcase .accessibility-section,
.dark .keyboard-showcase .social-section {
	background-color: #1a1d21 !important;
}

.dark .keyboard-showcase .hero-section {
	background: linear-gradient(180deg, #15181C 0%, #1a1d21 100%) !important;
}

.dark .keyboard-showcase .final-cta-section {
	background: linear-gradient(135deg, #1a2e22 0%, #243d2d 100%) !important;
}

/* Section text */
.dark .keyboard-showcase .section-title,
.dark .keyboard-showcase .section-subtitle,
.dark .keyboard-showcase h1,
.dark .keyboard-showcase h2,
.dark .keyboard-showcase h3 {
	color: #F5F5F5 !important;
}

.dark .keyboard-showcase p,
.dark .keyboard-showcase .section-subtitle {
	color: #CCCCCC !important;
}

/* Cards */
.dark .keyboard-showcase .problem-card,
.dark .keyboard-showcase .class-card,
.dark .keyboard-showcase .persona-card,
.dark .keyboard-showcase .a11y-card,
.dark .keyboard-showcase .testimonial-card,
.dark .keyboard-showcase .comparison-table {
	background: #1F2429 !important;
	border-color: #383E45 !important;
}

/* Pricing */
.dark #pricing,
.dark .pricing-section {
	background-color: #15181C !important;
}

.dark .pricing-card {
	background: #1F2429 !important;
	border-color: #383E45 !important;
}

.dark .pricing-card.popular {
	border-color: #059669 !important;
}

.dark .pricing-card-price,
.dark .pricing-card-amount,
.dark .pricing-title,
.dark .pricing-card-title {
	color: #F5F5F5 !important;
}

.dark .pricing-subtitle,
.dark .pricing-card-subtitle,
.dark .pricing-features li,
.dark .pricing-card-features li {
	color: #CCCCCC !important;
}

/* FAQ */
.dark #faq,
.dark .faq-section {
	background-color: #1a1d21 !important;
}

.dark .faq-question,
.dark .faq-accordion-title {
	color: #F5F5F5 !important;
}

.dark .faq-answer,
.dark .faq-accordion-content {
	color: #CCCCCC !important;
}

/* Trust */
.dark #trust,
.dark .trust-section,
.dark .social-proof-teaser {
	background-color: #15181C !important;
}

.dark .trust-title,
.dark .trust-section h2 {
	color: #F5F5F5 !important;
}

/* Navigation */
.dark .showcase-header,
.dark .landing-header {
	background-color: rgba(21, 24, 28, 0.95) !important;
	border-bottom-color: #383E45 !important;
}

.dark .header-nav a,
.dark .header-actions a {
	color: #CCCCCC !important;
}

/* Footer - ms365-footer dark mode consolidated in ms365-cocovox.css */
.dark footer:not(.ms365-footer),
.dark .landing-footer {
	background-color: #15181C !important;
	border-top-color: #383E45 !important;
}

.dark .footer-section-title {
	color: #F5F5F5 !important;
}

.dark .landing-footer a,
.dark .footer-link {
	color: #CCCCCC !important;
}

/* Buttons */
.dark .cta-button.primary {
	background: #059669 !important;
	color: #F5F5F5 !important;
}

.dark .cta-button.secondary {
	background: transparent !important;
	color: #F5F5F5 !important;
	border-color: #383E45 !important;
}

.dark .btn-secondary {
	background: #1F2429 !important;
	color: #F5F5F5 !important;
	border-color: #383E45 !important;
}

/* Badges */
.dark .section-badge,
.dark .hero-badge {
	background: rgba(45, 91, 62, 0.4) !important;
	border: 1px solid rgba(167, 243, 208, 0.4) !important;
	color: #A7F3D0 !important;
}

/* Input fields */
.dark .landing-page input,
.dark .landing-page textarea,
.dark .keyboard-showcase input,
.dark .keyboard-showcase textarea {
	background: #1F2429 !important;
	border-color: #383E45 !important;
	color: #F5F5F5 !important;
}