/* Global Theme Variables and Component Overrides for Zarematch */
/* Applies using: */
:root {
--bg-0: #0f1126;
--bg-1: #14162b;
--bg-2: #1b1e3a;
--text-0: #ffffff;
--text-1: #cfd3ff;
--muted: #9aa0c3;
--accent: #5a5fcf;
--accent-2: #7a7ffe;
--danger: #f5576c;
--success: #2ecc71;
--warning: #f1c40f;
--card: rgba(255,255,255,0.04);
--border: rgba(255,255,255,0.12);
--shadow: 0 10px 30px rgba(0,0,0,0.35);
--glass-bg: rgba(255,255,255,0.08);
--glass-br: 16px;
--glass-blur: 8px;
}
/* Bridge base design tokens to the active theme */
html[data-theme] {
/* Gradients used widely in style.css now follow theme accents */
--primary-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
--secondary-gradient: linear-gradient(135deg, var(--accent-2), var(--accent));
--accent-gradient: linear-gradient(135deg, var(--accent-2), var(--accent));
/* Gradients used by tienda.css */
--gradient-primary: linear-gradient(135deg, var(--accent), var(--accent-2));
--gradient-secondary: linear-gradient(135deg, var(--accent-2), var(--accent));
--gradient-premium: linear-gradient(135deg, var(--accent-2), var(--accent));
--gradient-ultimate: linear-gradient(135deg, var(--accent), var(--accent-2));
/* Sync common tokens */
--border-color: var(--border);
--glass-bg: color-mix(in srgb, var(--bg-2) 35%, transparent);
--text-primary: var(--text-0);
--text-secondary: var(--text-1);
--text-muted: var(--muted);
/* tienda.css base backgrounds */
--dark-bg: var(--bg-1);
--card-bg: color-mix(in srgb, var(--bg-2) 60%, transparent);
/* tienda.css shadows and accents */
--shadow-primary: var(--shadow);
--shadow-premium: var(--shadow);
--shadow-ultimate: var(--shadow);
--diamond-color: var(--accent-2);
/* tienda.css border color tokens */
--primary-color: var(--accent);
--secondary-color: var(--accent-2);
--accent-color: var(--accent-2);
/* Scrollbar: derive from theme tokens */
--scrollbar-track: var(--bg-1);
--scrollbar-thumb: linear-gradient(180deg, var(--accent), var(--accent-2));
--scrollbar-thumb-hover: linear-gradient(180deg, var(--accent-2), var(--accent));
--scrollbar-thumb-color: var(--accent-2);
}
/* Basic global targets to accept variables even if original CSS has fixed colors */
html[data-theme] body,
html[data-theme] .screen,
html[data-theme] .content-area {
background: var(--bg-1) !important;
color: var(--text-0) !important;
}
html[data-theme] .app-header,
html[data-theme] .bottom-nav,
html[data-theme] .chat-header,
html[data-theme] .country-modal,
html[data-theme] .lang-dialog {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
border-color: var(--border) !important;
color: var(--text-0) !important;
}
html[data-theme] .btn-primary {
background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
color: #fff !important;
border: 1px solid transparent !important;
}
html[data-theme] .btn-primary:hover,
html[data-theme] .send-btn:hover,
html[data-theme] .profile-action-btn:hover,
html[data-theme] .edit-profile-btn:hover {
filter: brightness(1.08) saturate(1.05);
box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-2) 35%, transparent) !important;
}
html[data-theme] .btn-secondary:hover,
html[data-theme] .icon-btn:hover,
html[data-theme] .lang-btn:hover,
html[data-theme] .country-picker:hover {
border-color: var(--accent-2) !important;
}
html[data-theme] .btn-secondary,
html[data-theme] .icon-btn,
html[data-theme] .lang-btn,
html[data-theme] .country-picker {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
}
/* Themed large search input (visible in all themes) */
html[data-theme] .search-input-large {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
/* Lupa siempre visible desde temas */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 12px center !important;
background-size: 18px 18px !important;
padding-left: 42px !important;
}
html[data-theme] .search-input-large::placeholder { color: var(--text-1) !important; opacity: .95 !important; }
html[data-theme] .search-input-large:focus {
border-color: color-mix(in srgb, var(--accent-2) 50%, transparent) !important;
box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-2) 22%, transparent) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
html[data-theme] input,
html[data-theme] textarea {
background: rgba(255,255,255,0.04) !important;
color: var(--text-0) !important;
border-color: var(--border) !important;
}
html[data-theme] .input-line { background: var(--border) !important; }
html[data-theme] .chat-empty,
html[data-theme] .muted,
html[data-theme] #partnerStatus { color: var(--muted) !important; }
html[data-theme] .country-picker.selected,
html[data-theme] .country-picker[data-selected="true"] { border-color: var(--accent-2) !important; }
/* Override purple focus/hover from style.css */
html[data-theme] .banner-upload:hover,
html[data-theme] .avatar-upload:hover {
border-color: color-mix(in srgb, var(--accent-2) 50%, transparent) !important;
background: color-mix(in srgb, var(--accent-2) 10%, transparent) !important;
}
html[data-theme] .input-group input:focus,
html[data-theme] .input-group select:focus,
html[data-theme] .input-group textarea:focus {
border-color: color-mix(in srgb, var(--accent-2) 50%, transparent) !important;
box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2) 20%, transparent) !important;
}
html[data-theme] .country-item:hover,
html[data-theme] .country-item:focus {
background: color-mix(in srgb, var(--accent-2) 15%, transparent) !important;
border-color: color-mix(in srgb, var(--accent-2) 45%, transparent) !important;
}
/* Headings and key labels adopt theme text color */
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] h5,
html[data-theme] h6,
html[data-theme] #screenTitle,
html[data-theme] .app-title,
html[data-theme] .chat-list-header h3,
html[data-theme] #chat-unread-title,
html[data-theme] #chat-all-title,
html[data-theme] .stat-number,
html[data-theme] .stat-label {
color: var(--text-0) !important;
}
/* Primary/secondary buttons and common CTAs */
html[data-theme] .send-btn,
html[data-theme] .profile-action-btn,
html[data-theme] .edit-profile-btn,
html[data-theme] .back-btn,
html[data-theme] .btn,
html[data-theme] button.btn,
html[data-theme] .btn-tertiary {
background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
color: #fff !important;
border: 1px solid transparent !important;
}
/* Make watch-ad button neutral (no theme gradient) */
html[data-theme] .watch-ad-btn {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
html[data-theme] .watch-ad-btn:hover {
background: color-mix(in srgb, var(--bg-2) 15%, transparent) !important;
border-color: var(--border) !important;
box-shadow: none !important;
filter: none !important;
}
/* Make close and report buttons neutral (no theme gradient) */
html[data-theme] .close-chat-btn,
html[data-theme] .report-user-btn {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
html[data-theme] .close-chat-btn:hover,
html[data-theme] .report-user-btn:hover {
background: color-mix(in srgb, var(--bg-2) 15%, transparent) !important;
border-color: var(--border) !important;
box-shadow: none !important;
filter: none !important;
}
/* Icon-only buttons or small action chips */
html[data-theme] .icon-btn,
html[data-theme] .country-picker,
html[data-theme] .lang-btn,
html[data-theme] .lang-close,
html[data-theme] .theme-close,
html[data-theme] .btn-secondary {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
}
/* Inputs and placeholders */
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--muted) !important; }
/* Action buttons under the swipe cards */
html[data-theme] .action-btn,
html[data-theme] .action-btn.like-btn,
html[data-theme] .action-btn.reject-btn,
html[data-theme] .action-btn.favorite-btn {
background: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--text-0) !important;
}
html[data-theme] .action-btn svg { stroke: var(--text-0) !important; }
html[data-theme] .action-btn.like-btn:hover,
html[data-theme] .action-btn.favorite-btn:hover { border-color: var(--accent-2) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 25%, transparent) !important; }
/* Bottom nav active item accent */
html[data-theme] .bottom-nav .nav-item.active,
html[data-theme] .bottom-nav .nav-item:focus {
color: var(--accent-2) !important;
}
html[data-theme] .bottom-nav .nav-item.active svg { stroke: var(--accent-2) !important; }
/* Quitar recuadro/contorno agresivo en el ícono activo para no simular una "etiqueta/pastilla" */
html[data-theme] .bottom-nav .nav-item.active .nav-icon,
html[data-theme] .bottom-nav .nav-item:focus .nav-icon {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Chips, badges, counters */
html[data-theme] .diamond-counter,
html[data-theme] .notification-badge {
background: var(--card) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
}
/* Chat composer send button */
html[data-theme] .send-btn { background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important; }
html[data-theme] .send-btn svg { stroke: #fff !important; }
/* Megaphone and verified buttons harmonized */
html[data-theme] .megaphone-btn,
html[data-theme] .verified-btn,
html[data-theme] .crown-btn {
background: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--text-0) !important;
}
html[data-theme] .verified-icon { stroke: var(--accent-2) !important; }
/* Header titles and subtitle */
html[data-theme] .app-header .header-content h1,
html[data-theme] .app-subtitle,
html[data-theme] .chat-header h3 { color: var(--text-0) !important; }
/* Main screen title should use accent color to match theme */
html[data-theme] #screenTitle { color: var(--accent-2) !important; }
/* Auth tabs adopt theme */
html[data-theme] .auth-tab { background: var(--card) !important; color: var(--text-0) !important; border: 1px solid var(--border) !important; }
html[data-theme] .auth-tab.active { background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important; color: #fff !important; border-color: transparent !important; }
/* Generic header buttons (where present) */
html[data-theme] .app-header .header-content button.btn-primary,
html[data-theme] .app-header .header-content .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important; color:#fff !important; border-color: transparent !important; }
/* Make SVGs follow currentColor for themed buttons */
html[data-theme] .btn-primary svg,
html[data-theme] .watch-ad-btn svg,
html[data-theme] .send-btn svg,
html[data-theme] .profile-action-btn svg,
html[data-theme] .action-btn svg { stroke: currentColor !important; fill: none !important; }
/* Links and emphasis */
html[data-theme] a { color: var(--accent-2) !important; }
html[data-theme] a:hover { color: var(--accent) !important; }
/* Tienda: force white text for the back-to-app button */
html[data-theme] .back-to-app { color: #ffffff !important; }
html[data-theme] .back-to-app:hover { color: #ffffff !important; }
/* Ruleta (ruleta.html) theming overrides */
html[data-theme] .header .title {
background: var(--primary-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow: none !important;
}
html[data-theme] .diamonds-counter {
background: linear-gradient(45deg, var(--accent), var(--accent-2)) !important;
color: #0b0b0b !important;
box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-2) 35%, transparent) !important;
border: 1px solid var(--border) !important;
}
html[data-theme] .spins-info { color: var(--text-0) !important; }
html[data-theme] .next-spins { color: var(--accent-2) !important; }
html[data-theme] .spins-counter { background: color-mix(in srgb, var(--bg-2) 35%, transparent) !important; }
html[data-theme] .profile-button,
html[data-theme] .watch-ad-button,
html[data-theme] .claim-button {
background: linear-gradient(45deg, var(--accent), var(--accent-2)) !important;
box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-2) 35%, transparent) !important;
color: #fff !important;
border: 1px solid var(--border) !important;
}
html[data-theme] .spin-button {
background: linear-gradient(45deg, var(--accent), var(--accent-2), var(--accent)) !important;
color: #0b0b0b !important;
box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-2) 40%, transparent) !important;
}
html[data-theme] .roulette-pointer { border-top-color: var(--accent-2) !important; }
html[data-theme] .modal { background: color-mix(in srgb, var(--bg-0) 80%, transparent) !important; }
html[data-theme] .modal-content {
background: linear-gradient(135deg, var(--bg-2), var(--bg-1)) !important;
color: var(--text-0) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow) !important;
}
html[data-theme] .prize-title,
html[data-theme] .prize-amount,
html[data-theme] .fake-ad h3 { color: var(--accent-2) !important; }
html[data-theme] .ad-timer { color: var(--accent-2) !important; }
html[data-theme] .ad-label { background: var(--accent-2) !important; color: #0b0b0b !important; }
html[data-theme] .ad-loading { border-top-color: var(--accent-2) !important; }
/* Accent icons and badges */
html[data-theme] .diamond-counter svg,
html[data-theme] .nav-item.active svg,
html[data-theme] .verified-icon,
html[data-theme] .feature-icon { color: var(--accent-2) !important; stroke: var(--accent-2) !important; }
/* Cards and lists */
html[data-theme] .feature-card,
html[data-theme] .matches-grid > *,
html[data-theme] .chat-list,
html[data-theme] .chat-window,
html[data-theme] .cards-stack > * {
background: var(--card) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow) !important;
}
/* Theme: Cyberpunk */
html[data-theme="cyberpunk"] {
--bg-0: #070410;
--bg-1: #0b0618;
--bg-2: #120a2a;
--text-0: #f2f2ff;
--text-1: #c6b7ff;
--muted: #a28bd6;
--accent: #ff00e6;
--accent-2: #00e5ff;
--card: rgba(255, 0, 230, 0.06);
--border: rgba(0, 229, 255, 0.22);
--shadow: 0 10px 40px rgba(0, 229, 255, 0.18), 0 0 0 1px rgba(255,0,230,0.08) inset;
}
/* Theme: Medieval */
html[data-theme="medieval"] {
--bg-0: #0f0c07;
--bg-1: #141007;
--bg-2: #1d170a;
--text-0: #f5e6c8;
--text-1: #e2d3b6;
--muted: #c3b18f;
--accent: #8b5e3c; /* leather brown */
--accent-2: #d4a373; /* warm gold */
--card: rgba(212,163,115,0.08);
--border: rgba(245,230,200,0.18);
--shadow: 0 10px 30px rgba(139, 94, 60, 0.35);
}
/* Theme: Futurista Neón */
html[data-theme="futurista-neon"] {
--bg-0: #020610;
--bg-1: #040a16;
--bg-2: #071225;
--text-0: #e6f3ff;
--text-1: #b7d9ff;
--muted: #89b7e6;
--accent: #00ffa3;
--accent-2: #00b3ff;
--card: rgba(0, 179, 255, 0.07);
--border: rgba(0, 255, 163, 0.22);
--shadow: 0 12px 32px rgba(0,179,255,0.25);
}
/* Theme: Glass (glassmorphism) */
html[data-theme="glass"] body::before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
pointer-events: none;
}
html[data-theme="glass"] {
--bg-0: #0a0c1a;
--bg-1: #0f1224;
--bg-2: #121633;
--text-0: #ffffff;
--text-1: #dde1ff;
--muted: #a9b0e3;
--accent: #7a7ffe;
--accent-2: #b28dff;
--card: rgba(255,255,255,0.08);
--border: rgba(255,255,255,0.18);
--shadow: 0 10px 30px rgba(0,0,0,0.35);
}
html[data-theme="glass"] .feature-card,
html[data-theme="glass"] .matches-grid > *,
html[data-theme="glass"] .chat-list,
html[data-theme="glass"] .chat-window,
html[data-theme="glass"] .lang-dialog,
html[data-theme="glass"] .country-modal {
background: var(--glass-bg) !important;
border: 1px solid var(--border) !important;
backdrop-filter: blur(var(--glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}
/* Theme: Retro */
html[data-theme="retro"] {
--bg-0: #1a1712;
--bg-1: #221f1a;
--bg-2: #2b2721;
--text-0: #f8f0dc;
--text-1: #f0e2c2;
--muted: #d4c1a1;
--accent: #ff7f50; /* coral */
--accent-2: #ffd166; /* warm yellow */
--card: rgba(255, 127, 80, 0.07);
--border: rgba(248, 240, 220, 0.18);
--shadow: 0 10px 25px rgba(255, 127, 80, 0.25);
}
/* Theme switcher helpers */
.theme-switch { position: relative; margin-right: 12px; }
.theme-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; border:1px solid var(--border); background: var(--card); color: var(--text-0); cursor:pointer; font-size:13px; }
.theme-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width: 220px; background: var(--bg-2); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); z-index: 3002; padding:6px; }
.theme-menu.open { display:block; }
.theme-item { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; background:transparent; border: none; color: var(--text-0); border-radius:10px; cursor:pointer; text-align:left; }
.theme-item:hover { background: var(--card); }
.theme-dot { width:14px; height:14px; border-radius:50%; box-shadow: 0 0 0 2px var(--border) inset; }
/* Quick color dots per theme for preview */
.theme-item[data-theme="cyberpunk"] .theme-dot { background: linear-gradient(135deg, #ff00e6, #00e5ff); }
.theme-item[data-theme="medieval"] .theme-dot { background: linear-gradient(135deg, #8b5e3c, #d4a373); }
.theme-item[data-theme="futurista-neon"] .theme-dot { background: linear-gradient(135deg, #00ffa3, #00b3ff); }
.theme-item[data-theme="glass"] .theme-dot { background: linear-gradient(135deg, #7a7ffe, #b28dff); }
.theme-item[data-theme="retro"] .theme-dot { background: linear-gradient(135deg, #ff7f50, #ffd166); }
/* ----------------------------- Extra Themes (15) ----------------------------- */
/* Oceanic */
html[data-theme="oceanic"] {
--bg-0: #05161a; --bg-1: #071f26; --bg-2: #0b2a33;
--text-0: #e8fbff; --text-1: #bfe9f2; --muted: #8cc6d4;
--accent: #00bcd4; --accent-2: #0097a7;
--card: rgba(0, 188, 212, 0.08); --border: rgba(0, 151, 167, 0.25);
--shadow: 0 12px 34px rgba(0, 151, 167, 0.25);
}
/* Sunset */
html[data-theme="sunset"] {
--bg-0: #1a0f14; --bg-1: #24121a; --bg-2: #351823;
--text-0: #ffeae3; --text-1: #ffd0c2; --muted: #f0a399;
--accent: #ff5e62; --accent-2: #ff9966;
--card: rgba(255, 153, 102, 0.08); --border: rgba(255, 94, 98, 0.22);
--shadow: 0 10px 28px rgba(255, 94, 98, 0.28);
}
/* Forest */
html[data-theme="forest"] {
--bg-0: #0c140f; --bg-1: #111a14; --bg-2: #17241c;
--text-0: #e8ffef; --text-1: #c9f7d9; --muted: #9edbb8;
--accent: #2ecc71; --accent-2: #20bf6b;
--card: rgba(46, 204, 113, 0.07); --border: rgba(32, 191, 107, 0.22);
--shadow: 0 10px 28px rgba(46, 204, 113, 0.25);
}
/* Strawberry Cream */
html[data-theme="strawberry-cream"] {
--bg-0: #1b1216; --bg-1: #24161b; --bg-2: #2e1a22;
--text-0: #fff1f5; --text-1: #ffd6e2; --muted: #f4abc4;
--accent: #ff477e; --accent-2: #ff85a1;
--card: rgba(255, 71, 126, 0.08); --border: rgba(255, 133, 161, 0.22);
--shadow: 0 10px 28px rgba(255, 71, 126, 0.25);
}
/* Aurora */
html[data-theme="aurora"] {
--bg-0: #070b14; --bg-1: #0a0f1a; --bg-2: #0f1830;
--text-0: #ebfaff; --text-1: #c9e9ff; --muted: #a4d3f5;
--accent: #7cf7ff; --accent-2: #7cffc3;
--card: rgba(124, 247, 255, 0.08); --border: rgba(124, 255, 195, 0.22);
--shadow: 0 12px 32px rgba(124, 247, 255, 0.24);
}
/* Solarized Dark */
html[data-theme="solarized-dark"] {
--bg-0: #002b36; --bg-1: #05232a; --bg-2: #073642;
--text-0: #eee8d5; --text-1: #93a1a1; --muted: #a7b6b6;
--accent: #b58900; --accent-2: #268bd2;
--card: rgba(38, 139, 210, 0.08); --border: rgba(181, 137, 0, 0.22);
--shadow: 0 10px 26px rgba(38, 139, 210, 0.24);
}
/* Monochrome */
html[data-theme="monochrome"] {
--bg-0: #0d0f12; --bg-1: #111318; --bg-2: #161a20;
--text-0: #f5f7fa; --text-1: #d9dde4; --muted: #aab0b9;
--accent: #9aa4b2; --accent-2: #c3ccd8;
--card: rgba(154, 164, 178, 0.08); --border: rgba(195, 204, 216, 0.22);
--shadow: 0 10px 26px rgba(154, 164, 178, 0.25);
}
/* Vaporwave */
html[data-theme="vaporwave"] {
--bg-0: #12081e; --bg-1: #180a29; --bg-2: #220f3a;
--text-0: #f9e6ff; --text-1: #e4c8ff; --muted: #c9a6ff;
--accent: #ff71ce; --accent-2: #01cdfe;
--card: rgba(255, 113, 206, 0.08); --border: rgba(1, 205, 254, 0.22);
--shadow: 0 12px 32px rgba(1, 205, 254, 0.24);
}
/* Matrix */
html[data-theme="matrix"] {
--bg-0: #060a06; --bg-1: #0a100a; --bg-2: #0d160d;
--text-0: #eaffe5; --text-1: #c8f7bd; --muted: #9ce290;
--accent: #00ff66; --accent-2: #00cc52;
--card: rgba(0, 255, 102, 0.07); --border: rgba(0, 204, 82, 0.22);
--shadow: 0 10px 26px rgba(0, 255, 102, 0.22);
}
/* Desert */
html[data-theme="desert"] {
--bg-0: #19150e; --bg-1: #201a12; --bg-2: #2a2219;
--text-0: #fff4e0; --text-1: #f1e0c8; --muted: #d7c2a4;
--accent: #e0a96d; --accent-2: #c57b57;
--card: rgba(224, 169, 109, 0.08); --border: rgba(197, 123, 87, 0.22);
--shadow: 0 10px 26px rgba(197, 123, 87, 0.25);
}
/* Pastel Dream */
html[data-theme="pastel-dream"] {
--bg-0: #12131a; --bg-1: #171925; --bg-2: #1e2130;
--text-0: #fbf8ff; --text-1: #ecdfff; --muted: #d6c6ff;
--accent: #a0e7e5; --accent-2: #b4f8c8;
--card: rgba(160, 231, 229, 0.08); --border: rgba(180, 248, 200, 0.22);
--shadow: 0 12px 32px rgba(160, 231, 229, 0.22);
}
/* Midnight Blue */
html[data-theme="midnight-blue"] {
--bg-0: #070a12; --bg-1: #0b0f1a; --bg-2: #0f1526;
--text-0: #e8f0ff; --text-1: #c6d6ff; --muted: #9fb6e6;
--accent: #4666ff; --accent-2: #6a8bff;
--card: rgba(70, 102, 255, 0.08); --border: rgba(106, 139, 255, 0.22);
--shadow: 0 12px 32px rgba(70, 102, 255, 0.25);
}
/* Holo */
html[data-theme="holo"] {
--bg-0: #0f0f16; --bg-1: #131320; --bg-2: #191a2e;
--text-0: #f5f7ff; --text-1: #e0e6ff; --muted: #c1caf7;
--accent: #8a7dff; --accent-2: #64d9ff;
--card: rgba(138, 125, 255, 0.08); --border: rgba(100, 217, 255, 0.22);
--shadow: 0 10px 28px rgba(100, 217, 255, 0.25);
}
/* Lava */
html[data-theme="lava"] {
--bg-0: #140b0b; --bg-1: #1b0e0e; --bg-2: #281111;
--text-0: #ffe9e6; --text-1: #ffcfc8; --muted: #f3a39a;
--accent: #ff3b30; --accent-2: #ff7b54;
--card: rgba(255, 59, 48, 0.07); --border: rgba(255, 123, 84, 0.22);
--shadow: 0 10px 26px rgba(255, 59, 48, 0.22);
}
/* Minty */
html[data-theme="minty"] {
--bg-0: #0b1311; --bg-1: #0e1916; --bg-2: #13231e;
--text-0: #eafff9; --text-1: #c8fff1; --muted: #96e7d4;
--accent: #2ed1b7; --accent-2: #5cf2d6;
--card: rgba(46, 209, 183, 0.08); --border: rgba(92, 242, 214, 0.22);
--shadow: 0 10px 28px rgba(46, 209, 183, 0.24);
}
/* Sapphire */
html[data-theme="sapphire"] {
--bg-0: #0a0e16; --bg-1: #0d121d; --bg-2: #121a2a;
--text-0: #e6f1ff; --text-1: #c8dcff; --muted: #a7c2f0;
--accent: #2d9cff; --accent-2: #57b2ff;
--card: rgba(45, 156, 255, 0.08); --border: rgba(87, 178, 255, 0.22);
--shadow: 0 12px 30px rgba(45, 156, 255, 0.24);
}
/* Royal Purple */
html[data-theme="royal-purple"] {
--bg-0: #130b1a; --bg-1: #190f24; --bg-2: #221233;
--text-0: #f3e6ff; --text-1: #dcc2ff; --muted: #c3a0f7;
--accent: #7a3cff; --accent-2: #b066ff;
--card: rgba(122, 60, 255, 0.08); --border: rgba(176, 102, 255, 0.22);
--shadow: 0 12px 32px rgba(122, 60, 255, 0.24);
}
/* Candy Pop */
html[data-theme="candy-pop"] {
--bg-0: #131016; --bg-1: #19121f; --bg-2: #20152a;
--text-0: #fff2fb; --text-1: #ffd8f5; --muted: #f7b0e8;
--accent: #ff5edb; --accent-2: #7afcff;
--card: rgba(255, 94, 219, 0.08); --border: rgba(122, 252, 255, 0.22);
--shadow: 0 12px 32px rgba(255, 94, 219, 0.22);
}
/* Autumn */
html[data-theme="autumn"] {
--bg-0: #1a120b; --bg-1: #22170f; --bg-2: #2c1f16;
--text-0: #fff3e6; --text-1: #f6dcc7; --muted: #e2c0a3;
--accent: #ff914d; --accent-2: #ffb26b;
--card: rgba(255, 145, 77, 0.08); --border: rgba(255, 178, 107, 0.22);
--shadow: 0 12px 30px rgba(255, 145, 77, 0.22);
}
/* Steel */
html[data-theme="steel"] {
--bg-0: #0f1216; --bg-1: #131820; --bg-2: #181f2a;
--text-0: #eef2f7; --text-1: #cfd7e3; --muted: #aab6c8;
--accent: #5b708b; --accent-2: #8aa1bf;
--card: rgba(90, 112, 139, 0.08); --border: rgba(138, 161, 191, 0.22);
--shadow: 0 10px 26px rgba(90, 112, 139, 0.24);
}
/* Blossom */
html[data-theme="blossom"] {
--bg-0: #170f15; --bg-1: #1e141c; --bg-2: #2a1b28;
--text-0: #fff0f6; --text-1: #ffd6e8; --muted: #f2b3cc;
--accent: #ff79c6; --accent-2: #ffa5d8;
--card: rgba(255, 121, 198, 0.08); --border: rgba(255, 165, 216, 0.22);
--shadow: 0 10px 26px rgba(255, 121, 198, 0.24);
}
/* Arctic */
html[data-theme="arctic"] {
--bg-0: #0a1014; --bg-1: #0e171f; --bg-2: #13212c;
--text-0: #ecf8ff; --text-1: #cdeaff; --muted: #a9d3f5;
--accent: #6bd6ff; --accent-2: #a0e4ff;
--card: rgba(107, 214, 255, 0.08); --border: rgba(160, 228, 255, 0.22);
--shadow: 0 12px 32px rgba(107, 214, 255, 0.24);
}
/* Neon Grape */
html[data-theme="neon-grape"] {
--bg-0: #0f0a16; --bg-1: #140d1f; --bg-2: #1c1230;
--text-0: #f5e9ff; --text-1: #e2ccff; --muted: #c7a8ff;
--accent: #9d4edd; --accent-2: #7b2cbf;
--card: rgba(157, 78, 221, 0.08); --border: rgba(123, 44, 191, 0.22);
--shadow: 0 12px 32px rgba(157, 78, 221, 0.24);
}
/* Preview dots for extra themes */
.theme-item[data-theme="oceanic"] .theme-dot { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.theme-item[data-theme="sunset"] .theme-dot { background: linear-gradient(135deg, #ff5e62, #ff9966); }
.theme-item[data-theme="forest"] .theme-dot { background: linear-gradient(135deg, #2ecc71, #20bf6b); }
.theme-item[data-theme="strawberry-cream"] .theme-dot { background: linear-gradient(135deg, #ff477e, #ff85a1); }
.theme-item[data-theme="aurora"] .theme-dot { background: linear-gradient(135deg, #7cf7ff, #7cffc3); }
.theme-item[data-theme="solarized-dark"] .theme-dot { background: linear-gradient(135deg, #b58900, #268bd2); }
.theme-item[data-theme="monochrome"] .theme-dot { background: linear-gradient(135deg, #9aa4b2, #c3ccd8); }
.theme-item[data-theme="vaporwave"] .theme-dot { background: linear-gradient(135deg, #ff71ce, #01cdfe); }
.theme-item[data-theme="matrix"] .theme-dot { background: linear-gradient(135deg, #00ff66, #00cc52); }
.theme-item[data-theme="desert"] .theme-dot { background: linear-gradient(135deg, #e0a96d, #c57b57); }
.theme-item[data-theme="pastel-dream"] .theme-dot { background: linear-gradient(135deg, #a0e7e5, #b4f8c8); }
.theme-item[data-theme="midnight-blue"] .theme-dot { background: linear-gradient(135deg, #4666ff, #6a8bff); }
.theme-item[data-theme="holo"] .theme-dot { background: linear-gradient(135deg, #8a7dff, #64d9ff); }
.theme-item[data-theme="lava"] .theme-dot { background: linear-gradient(135deg, #ff3b30, #ff7b54); }
.theme-item[data-theme="minty"] .theme-dot { background: linear-gradient(135deg, #2ed1b7, #5cf2d6); }
.theme-item[data-theme="sapphire"] .theme-dot { background: linear-gradient(135deg, #2d9cff, #57b2ff); }
.theme-item[data-theme="royal-purple"] .theme-dot { background: linear-gradient(135deg, #7a3cff, #b066ff); }
.theme-item[data-theme="candy-pop"] .theme-dot { background: linear-gradient(135deg, #ff5edb, #7afcff); }
.theme-item[data-theme="autumn"] .theme-dot { background: linear-gradient(135deg, #ff914d, #ffb26b); }
.theme-item[data-theme="steel"] .theme-dot { background: linear-gradient(135deg, #5b708b, #8aa1bf); }
.theme-item[data-theme="blossom"] .theme-dot { background: linear-gradient(135deg, #ff79c6, #ffa5d8); }
.theme-item[data-theme="arctic"] .theme-dot { background: linear-gradient(135deg, #6bd6ff, #a0e4ff); }
.theme-item[data-theme="neon-grape"] .theme-dot { background: linear-gradient(135deg, #9d4edd, #7b2cbf); }
/* Peachy */
html[data-theme="peachy"] {
--bg-0: #1a1412; --bg-1: #211a18; --bg-2: #2a211f;
--text-0: #fff4ef; --text-1: #ffe1d6; --muted: #f6c6b8;
--accent: #ffadad; --accent-2: #ffd6a5;
--card: rgba(255, 173, 173, 0.08); --border: rgba(255, 214, 165, 0.22);
--shadow: 0 10px 26px rgba(255, 173, 173, 0.22);
}
/* Turquoise Sunset */
html[data-theme="turquoise-sunset"] {
--bg-0: #0a1012; --bg-1: #0e161a; --bg-2: #132027;
--text-0: #eaffe9; --text-1: #d0ffe6; --muted: #a8f5d7;
--accent: #06d6a0; --accent-2: #ff9f1c;
--card: rgba(6, 214, 160, 0.08); --border: rgba(255, 159, 28, 0.22);
--shadow: 0 12px 30px rgba(6, 214, 160, 0.22);
}
/* Preview dots for the two new themes */
.theme-item[data-theme="peachy"] .theme-dot { background: linear-gradient(135deg, #ffadad, #ffd6a5); }
.theme-item[data-theme="turquoise-sunset"] .theme-dot { background: linear-gradient(135deg, #06d6a0, #ff9f1c); }