/* Theme variables ported 1:1 from the Windows app's Sources/HaynoiWindows/Themes/Theme.VietnamViral.xaml and Theme.USAViral.xaml — same hex values, same gradient stops, same glow blur radii/opacities, so the site matches the app exactly. Selected via [data-theme] on , toggled by js/theme.js. */ :root, [data-theme="vn"] { --accent-1: #8B5CF6; /* purple */ --accent-2: #3B82F6; /* blue */ --window-bg: linear-gradient(135deg, #0A0E27 0%, #141A3D 100%); --ambient-1: radial-gradient(circle at 8% 8%, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0) 60%); --ambient-2: radial-gradient(circle at 95% 95%, rgba(168, 85, 247, 0.25) 0%, rgba(168, 85, 247, 0) 65%); --ambient-display: block; --dot-color: #4FD1FF; --dot-opacity: 0.16; --title-gradient: linear-gradient(90deg, #FFFFFF 0%, #A855F7 45%, #67E8F9 100%); --title-glow: 0 0 34px rgba(168, 85, 247, 0.9); --label-text: #F3F0FF; --muted-text: #B7BEE0; --error-text: #FF6B7A; --card-bg: rgba(28, 34, 71, 0.4); --card-border: rgba(148, 111, 224, 0.88); --card-border-blue: rgba(79, 168, 245, 0.88); --card-border-cyan: rgba(61, 232, 255, 0.88); --card-radius: 10px; --card-glow: 0 0 10px rgba(139, 92, 246, 0.35); --card-glow-blue: 0 0 10px rgba(59, 130, 246, 0.35); --card-glow-cyan: 0 0 10px rgba(34, 211, 238, 0.35); --input-bg: #1B2044; --input-text: #F1F0FF; --input-border: #3A3F6B; --input-focus-border: #8B5CF6; --button-radius: 8px; --primary-button-bg: linear-gradient(90deg, #8B5CF6 0%, #3B82F6 100%); --primary-button-fg: #FFFFFF; --primary-button-glow: 0 0 16px rgba(139, 92, 246, 0.8); --secondary-button-border: #6B72A8; --secondary-button-fg: #E2E4F5; --star-glow: 8px; --star-opacity-max: 0.85; } [data-theme="us"] { --accent-1: #CCFF00; /* electric lime */ --accent-2: #FF00AA; /* cyber magenta */ --window-bg: linear-gradient(135deg, #0A0A0A 0%, #1A1A1E 100%); /* Flat background by design — no ambient "loang" glow in the USA theme. */ --ambient-1: none; --ambient-2: none; --ambient-display: none; --dot-color: #CCFF00; --dot-opacity: 0.12; --title-gradient: linear-gradient(90deg, #CCFF00 0%, #FF00AA 100%); --title-glow: 0 0 14px rgba(255, 0, 170, 0.85); --label-text: #F5F5F5; --muted-text: #ADADAD; --error-text: #FF4D4D; /* USA theme does not rotate card border colors — all three variants resolve to the same lime, matching Theme.USAViral.xaml. */ --card-bg: rgba(20, 20, 20, 0.45); --card-border: rgba(204, 255, 0, 0.8); --card-border-blue: rgba(204, 255, 0, 0.8); --card-border-cyan: rgba(204, 255, 0, 0.8); --card-radius: 3px; --card-glow: 0 0 7px rgba(204, 255, 0, 0.5); --card-glow-blue: 0 0 7px rgba(204, 255, 0, 0.5); --card-glow-cyan: 0 0 7px rgba(204, 255, 0, 0.5); --input-bg: #161616; --input-text: #F5F5F5; --input-border: #333333; --input-focus-border: #FF00AA; --button-radius: 3px; --primary-button-bg: linear-gradient(90deg, #CCFF00 0%, #FF00AA 100%); --primary-button-fg: #0A0A0A; --primary-button-glow: 0 0 12px rgba(255, 0, 170, 0.9); --secondary-button-border: #FF00AA; --secondary-button-fg: #F5F5F5; /* Crisp, flat stars — no halo (StarfieldGlow=False in the app). */ --star-glow: 0px; --star-opacity-max: 1; } /* Dot-grid texture: VN uses sparse round dots (matches cover.png's barely- there texture); USA uses faint grid lines (matches the app's line-based DrawingBrush). Same 44px tile size as Theme.Shared's DrawingBrush.Viewport. */ [data-theme="vn"] .dot-grid { background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1.2px); background-size: 44px 44px; opacity: var(--dot-opacity); } [data-theme="us"] .dot-grid { background-image: linear-gradient(to right, var(--dot-color) 0.5px, transparent 0.5px), linear-gradient(to bottom, var(--dot-color) 0.5px, transparent 0.5px); background-size: 44px 44px; opacity: var(--dot-opacity); }