/* * varunvashisht.com theme variables — single source of truth * ───────────────────────────────────────────────────────── * 24 themes as CSS custom property sets, keyed by [data-theme] on * the element. This file is the canonical theme definition; * every subsite copies it into its build (see subsites/gaming/ * astro.config.mjs prebuild). Main site can also import this file * once it migrates off its inline THEMES object. * * Variable contract (matches what every component expects): * --bg, --bg-2, --bg-3, --bg-dark backgrounds (page, card, deeper card, deepest) * --accent, --accent-soft primary accent + hover variant * --text, --text-soft, * --text-mute, --text-quiet 4 tiers of text emphasis * --border, --border-strong hairline + strong borders * --hairline subtle dividers (less than border) * --nav-bg-scrolled nav background when scrolled * --selection ::selection background * * To add a new theme: pick a key, add a rule below, ship. Subsites * pick up the new theme on next rebuild. */ /* Default — applies when no data-theme is set */ :root { /* Tells Chromium / WebKit that the site already provides its own dark + light themes — disables the browser's "Force Dark" / "Auto Dark Mode for Web Contents" inversion which otherwise lifts blacks to grey and tints saturated reds toward pink. */ color-scheme: dark light; --bg: #121212; --bg-2: #1e1e1e; --bg-3: #181818; --bg-dark: #0a0a0a; --accent: #10b981; --accent-soft: #34d399; --text: #ffffff; --text-soft: #a3a3a3; --text-mute: #737373; --text-quiet: #525252; --border: #262626; --border-strong: #404040; --hairline: rgba(255,255,255,0.05); --nav-bg-scrolled: rgba(18,18,18,0.95); --selection: rgba(16,185,129,0.25); } /* ── Core themes (1–10) — production-safe, recruiter-friendly ── */ html[data-theme="executive-dark"] { --bg: #121212; --bg-2: #1e1e1e; --bg-3: #181818; --bg-dark: #0a0a0a; --accent: #10b981; --accent-soft: #34d399; --text: #ffffff; --text-soft: #a3a3a3; --text-mute: #737373; --text-quiet: #525252; --border: #262626; --border-strong: #404040; --hairline: rgba(255,255,255,0.05); --nav-bg-scrolled: rgba(18,18,18,0.95); --selection: rgba(16,185,129,0.25); } html[data-theme="corporate-clean"] { --bg: #f5f7fa; --bg-2: #ffffff; --bg-3: #eef2f7; --bg-dark: #ffffff; --accent: #0078d4; --accent-soft: #2b88d8; --text: #1a202c; --text-soft: #4a5568; --text-mute: #718096; --text-quiet: #a0aec0; --border: #e2e8f0; --border-strong: #cbd5e0; --hairline: rgba(0,0,0,0.06); --nav-bg-scrolled: rgba(255,255,255,0.95); --selection: rgba(0,120,212,0.18); } html[data-theme="creative-studio"] { --bg: #faf7f5; --bg-2: #ffffff; --bg-3: #f5efe9; --bg-dark: #1a1a1a; --accent: #ff4d6d; --accent-soft: #ff7a93; --text: #1a1a1a; --text-soft: #4a4a4a; --text-mute: #888888; --text-quiet: #bbbbbb; --border: #e8dfd6; --border-strong: #d4c5b3; --hairline: rgba(0,0,0,0.05); --nav-bg-scrolled: rgba(250,247,245,0.92); --selection: rgba(255,77,109,0.25); } html[data-theme="brutalist"] { --bg: #f0eee6; --bg-2: #ffffff; --bg-3: #e8e5d8; --bg-dark: #000000; --accent: #ff5500; --accent-soft: #ff7733; --text: #000000; --text-soft: #222222; --text-mute: #444444; --text-quiet: #888888; --border: #000000; --border-strong: #000000; --hairline: #000000; --nav-bg-scrolled: #f0eee6; --selection: rgba(255,85,0,0.3); } html[data-theme="glass"] { --bg: #0c1226; --bg-2: rgba(255,255,255,0.06); --bg-3: rgba(255,255,255,0.04); --bg-dark: #060914; --accent: #60a5fa; --accent-soft: #93c5fd; --text: #f0f4ff; --text-soft: #c4d0e6; --text-mute: #8ea0c2; --text-quiet: #5d6f8f; --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.25); --hairline: rgba(255,255,255,0.08); --nav-bg-scrolled: rgba(12,18,38,0.6); --selection: rgba(96,165,250,0.3); } html[data-theme="terminal"] { --bg: #000000; --bg-2: #0a0a0a; --bg-3: #050505; --bg-dark: #000000; --accent: #00ff41; --accent-soft: #4dff79; --text: #00ff41; --text-soft: #00cc34; --text-mute: #00992b; --text-quiet: #00661d; --border: #00ff41; --border-strong: #00ff41; --hairline: rgba(0,255,65,0.15); --nav-bg-scrolled: rgba(0,0,0,0.98); --selection: rgba(0,255,65,0.3); } html[data-theme="editorial"] { --bg: #faf6ef; --bg-2: #fffaf0; --bg-3: #f3ecdc; --bg-dark: #2c1810; --accent: #8b3a1f; --accent-soft: #c0552f; --text: #2c1810; --text-soft: #4a3024; --text-mute: #6b4a36; --text-quiet: #9c7c66; --border: #d9c9aa; --border-strong: #b89f7a; --hairline: rgba(44,24,16,0.08); --nav-bg-scrolled: rgba(250,246,239,0.96); --selection: rgba(139,58,31,0.22); } html[data-theme="neon-tokyo"] { --bg: #0a0014; --bg-2: #14092a; --bg-3: #1a0d33; --bg-dark: #050008; --accent: #ff006e; --accent-soft: #ff4d94; --text: #f0f0ff; --text-soft: #c8b8e0; --text-mute: #9080b0; --text-quiet: #605070; --border: rgba(255,0,110,0.3); --border-strong: #ff006e; --hairline: rgba(255,0,110,0.15); --nav-bg-scrolled: rgba(10,0,20,0.95); --selection: rgba(255,0,110,0.35); } html[data-theme="minimal-luxury"] { --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5; --bg-dark: #1a1a1a; --accent: #b8985a; --accent-soft: #d4b97a; --text: #1a1a1a; --text-soft: #555555; --text-mute: #999999; --text-quiet: #cccccc; --border: #eeeeee; --border-strong: #dddddd; --hairline: rgba(0,0,0,0.03); --nav-bg-scrolled: rgba(255,255,255,0.98); --selection: rgba(184,152,90,0.2); } html[data-theme="blueprint"] { --bg: #0a1929; --bg-2: #0f2540; --bg-3: #133050; --bg-dark: #050d1a; --accent: #00d4ff; --accent-soft: #4dddff; --text: #e0f4ff; --text-soft: #a8cce0; --text-mute: #7090a8; --text-quiet: #4a6878; --border: rgba(0,212,255,0.25); --border-strong: rgba(0,212,255,0.5); --hairline: rgba(0,212,255,0.1); --nav-bg-scrolled: rgba(10,25,41,0.96); --selection: rgba(0,212,255,0.3); } /* ── Aggressive themes (11–20) — personality-forward ── */ html[data-theme="newspaper"] { --bg: #f4ecd8; --bg-2: #fdf6e3; --bg-3: #eee2c8; --bg-dark: #1a1714; --accent: #1a1714; --accent-soft: #3a342c; --text: #1a1714; --text-soft: #3a342c; --text-mute: #6b6354; --text-quiet: #8a8270; --border: #1a1714; --border-strong: #1a1714; --hairline: rgba(26,23,20,0.25); --nav-bg-scrolled: #f4ecd8; --selection: rgba(26,23,20,0.2); } html[data-theme="memphis"] { --bg: #fef6e4; --bg-2: #ffffff; --bg-3: #f6e7c1; --bg-dark: #001858; --accent: #f582ae; --accent-soft: #ffa5c5; --text: #001858; --text-soft: #172c66; --text-mute: #5b6c93; --text-quiet: #8c9bb8; --border: #001858; --border-strong: #001858; --hairline: rgba(0,24,88,0.15); --nav-bg-scrolled: rgba(254,246,228,0.96); --selection: rgba(245,130,174,0.3); } html[data-theme="y2k"] { --bg: #c2e9ff; --bg-2: #ffffff; --bg-3: #e0f4ff; --bg-dark: #1e3a5f; --accent: #0066ff; --accent-soft: #4d94ff; --text: #1e3a5f; --text-soft: #3a5a82; --text-mute: #6b8aab; --text-quiet: #a0b8d0; --border: rgba(30,58,95,0.2); --border-strong: rgba(30,58,95,0.5); --hairline: rgba(30,58,95,0.08); --nav-bg-scrolled: rgba(194,233,255,0.85); --selection: rgba(0,102,255,0.2); } html[data-theme="vaporwave"] { --bg: #1a0033; --bg-2: #2d0052; --bg-3: #3d0066; --bg-dark: #0a001a; --accent: #ff71ce; --accent-soft: #ff9ee0; --text: #ffffff; --text-soft: #ffb6e1; --text-mute: #a78bfa; --text-quiet: #6d4aa8; --border: rgba(255,113,206,0.4); --border-strong: #ff71ce; --hairline: rgba(255,113,206,0.15); --nav-bg-scrolled: rgba(26,0,51,0.85); --selection: rgba(255,113,206,0.35); } html[data-theme="tactical"] { --bg: #1c1f0f; --bg-2: #2d3318; --bg-3: #252913; --bg-dark: #0a0c05; --accent: #d4a217; --accent-soft: #f0c040; --text: #d4d4a0; --text-soft: #a8a87a; --text-mute: #7a7a58; --text-quiet: #4a4a38; --border: #4a4a28; --border-strong: #6a6a38; --hairline: rgba(212,162,23,0.15); --nav-bg-scrolled: rgba(28,31,15,0.98); --selection: rgba(212,162,23,0.3); } html[data-theme="sketch"] { --bg: #fffef7; --bg-2: #ffffff; --bg-3: #f7f5e8; --bg-dark: #2d2a26; --accent: #2d2a26; --accent-soft: #4a4540; --text: #2d2a26; --text-soft: #4a4540; --text-mute: #786f66; --text-quiet: #aaa093; --border: #2d2a26; --border-strong: #2d2a26; --hairline: rgba(45,42,38,0.15); --nav-bg-scrolled: rgba(255,254,247,0.96); --selection: rgba(232,90,79,0.25); } html[data-theme="pixel"] { --bg: #1a1c2e; --bg-2: #2d3155; --bg-3: #232649; --bg-dark: #0c0d1a; --accent: #ffd700; --accent-soft: #fff04d; --text: #ffffff; --text-soft: #c0c4e0; --text-mute: #8088b8; --text-quiet: #4c5388; --border: #ffd700; --border-strong: #ffffff; --hairline: rgba(255,215,0,0.2); --nav-bg-scrolled: rgba(26,28,46,0.98); --selection: rgba(255,215,0,0.4); } html[data-theme="material"] { --bg: #fef7ff; --bg-2: #ffffff; --bg-3: #f7ecf9; --bg-dark: #1c1b1f; --accent: #6750a4; --accent-soft: #8675c4; --text: #1c1b1f; --text-soft: #49454f; --text-mute: #79747e; --text-quiet: #b8b3bf; --border: #e7e0ec; --border-strong: #cac4d0; --hairline: rgba(28,27,31,0.05); --nav-bg-scrolled: rgba(254,247,255,0.96); --selection: rgba(103,80,164,0.2); } html[data-theme="swiss"] { --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f0f0f0; --bg-dark: #000000; --accent: #ff0000; --accent-soft: #ff3333; --text: #000000; --text-soft: #1a1a1a; --text-mute: #666666; --text-quiet: #aaaaaa; --border: #000000; --border-strong: #000000; --hairline: rgba(0,0,0,0.1); --nav-bg-scrolled: rgba(255,255,255,0.98); --selection: rgba(255,0,0,0.2); } html[data-theme="liquid"] { --bg: #e8e3dc; --bg-2: rgba(255,255,255,0.5); --bg-3: rgba(255,255,255,0.3); --bg-dark: #1a1817; --accent: #6b7c93; --accent-soft: #8a9bb0; --text: #1a1817; --text-soft: #4a4540; --text-mute: #7a7570; --text-quiet: #aaa593; --border: rgba(255,255,255,0.6); --border-strong: rgba(255,255,255,0.9); --hairline: rgba(255,255,255,0.4); --nav-bg-scrolled: rgba(232,227,220,0.5); --selection: rgba(196,165,119,0.3); } /* ── Immersive themes — full vibe ── */ html[data-theme="matrix"] { --bg: #000000; --bg-2: #040a04; --bg-3: #020602; --bg-dark: #000000; --accent: #00ff66; --accent-soft: #4dffa0; --text: #00ff66; --text-soft: #00cc52; --text-mute: #009938; --text-quiet: #006625; --border: #00ff66; --border-strong: #00ff66; --hairline: rgba(0,255,102,0.18); --nav-bg-scrolled: rgba(0,0,0,0.96); --selection: rgba(0,255,102,0.32); } html[data-theme="redteam"] { --bg: #000000; --bg-2: #0a0202; --bg-3: #060101; --bg-dark: #000000; --accent: #ff003f; --accent-soft: #ff4060; --text: #ff003f; --text-soft: #cc0033; --text-mute: #990028; --text-quiet: #66001c; --border: #ff003f; --border-strong: #ff003f; --hairline: rgba(255,0,63,0.2); --nav-bg-scrolled: rgba(0,0,0,0.96); --selection: rgba(255,0,63,0.32); } html[data-theme="hologram"] { --bg: #001824; --bg-2: #002a3a; --bg-3: #001f2e; --bg-dark: #000c12; --accent: #00e5ff; --accent-soft: #5cf2ff; --text: #a5f3fc; --text-soft: #67e8f9; --text-mute: #22d3ee; --text-quiet: #0891b2; --border: rgba(0,229,255,0.3); --border-strong: rgba(0,229,255,0.6); --hairline: rgba(0,229,255,0.12); --nav-bg-scrolled: rgba(0,24,36,0.95); --selection: rgba(0,229,255,0.32); } html[data-theme="amber-crt"] { --bg: #0a0500; --bg-2: #120800; --bg-3: #0a0500; --bg-dark: #000; --accent: #ffb000; --accent-soft: #ffc940; --text: #ffb000; --text-soft: #cc8c00; --text-mute: #996900; --text-quiet: #664600; --border: #ffb000; --border-strong: #ffb000; --hairline: rgba(255,176,0,0.18); --nav-bg-scrolled: rgba(10,5,0,0.96); --selection: rgba(255,176,0,0.32); } /* ═══════════════════════════════════════════════════════════════════ Browser-preference light/dark variants for all 24 themes ───────────────────────────────────────────────────────────────── Each theme keeps its identity (accent hue, personality, type system) but flips backgrounds + text tiers based on prefers-color-scheme. Themes whose natural mode is DARK get a `(prefers-color-scheme: light)` block; themes whose natural mode is LIGHT get a `(prefers-color-scheme: dark)` block. Accent hues are preserved (with chroma adjusted for contrast on the new background). Decorative scanlines, grids, and gradients defined outside the var contract stay as-is — only the variable contract is inverted here, so any component reading var(--*) flips cleanly. ═══════════════════════════════════════════════════════════════════ */ /* ── DARK-default themes → LIGHT variant ─────────────────────────── */ @media (prefers-color-scheme: light) { html[data-theme="executive-dark"] { --bg: #f7faf9; --bg-2: #ffffff; --bg-3: #ecf3f0; --bg-dark: #ffffff; --accent: #047857; --accent-soft: #059669; --text: #0a1a14; --text-soft: #2d3f37; --text-mute: #5a6e64; --text-quiet: #8a9a92; --border: #d8e3df; --border-strong: #b6c4be; --hairline: rgba(10,26,20,0.06); --nav-bg-scrolled: rgba(247,250,249,0.95); --selection: rgba(4,120,87,0.18); } html[data-theme="glass"] { --bg: #eef4fb; --bg-2: rgba(255,255,255,0.7); --bg-3: rgba(255,255,255,0.5); --bg-dark: #dde7f3; --accent: #2563eb; --accent-soft: #3b82f6; --text: #0c1226; --text-soft: #2d3f6b; --text-mute: #5a6f96; --text-quiet: #8a9bb8; --border: rgba(12,18,38,0.12); --border-strong: rgba(12,18,38,0.25); --hairline: rgba(12,18,38,0.06); --nav-bg-scrolled: rgba(238,244,251,0.7); --selection: rgba(37,99,235,0.2); } html[data-theme="terminal"] { /* Solarized Light vibe — preserves the terminal feel in light mode. */ --bg: #fdf6e3; --bg-2: #eee8d5; --bg-3: #f5efd8; --bg-dark: #fdf6e3; --accent: #2d7a3e; --accent-soft: #4a9e5e; --text: #2d7a3e; --text-soft: #586e75; --text-mute: #657b83; --text-quiet: #93a1a1; --border: #2d7a3e; --border-strong: #2d7a3e; --hairline: rgba(45,122,62,0.18); --nav-bg-scrolled: rgba(253,246,227,0.96); --selection: rgba(45,122,62,0.22); } html[data-theme="neon-tokyo"] { --bg: #fff5fa; --bg-2: #ffffff; --bg-3: #fbe8f2; --bg-dark: #fcdfeb; --accent: #d40060; --accent-soft: #ff1f80; --text: #1a0010; --text-soft: #4a1530; --text-mute: #7a3658; --text-quiet: #a878a0; --border: rgba(212,0,96,0.28); --border-strong: #d40060; --hairline: rgba(212,0,96,0.12); --nav-bg-scrolled: rgba(255,245,250,0.92); --selection: rgba(212,0,96,0.22); } html[data-theme="blueprint"] { --bg: #f3f7fa; --bg-2: #ffffff; --bg-3: #e8eff5; --bg-dark: #dde8f0; --accent: #0066a8; --accent-soft: #0078c8; --text: #0a1929; --text-soft: #2d4863; --text-mute: #5a7388; --text-quiet: #8a9eb0; --border: rgba(0,102,168,0.22); --border-strong: rgba(0,102,168,0.45); --hairline: rgba(0,102,168,0.08); --nav-bg-scrolled: rgba(243,247,250,0.95); --selection: rgba(0,102,168,0.2); } html[data-theme="vaporwave"] { --bg: #fef0fa; --bg-2: #ffffff; --bg-3: #fce0f0; --bg-dark: #f0c8e0; --accent: #c11a92; --accent-soft: #d63dad; --text: #2a0040; --text-soft: #4a1862; --text-mute: #7a4090; --text-quiet: #a878b8; --border: rgba(193,26,146,0.35); --border-strong: #c11a92; --hairline: rgba(193,26,146,0.12); --nav-bg-scrolled: rgba(254,240,250,0.9); --selection: rgba(193,26,146,0.22); } html[data-theme="tactical"] { --bg: #ebe7d0; --bg-2: #f3efd9; --bg-3: #e0dbc2; --bg-dark: #d4cfb4; --accent: #8a6a10; --accent-soft: #a8841e; --text: #1c1f0f; --text-soft: #3a3d22; --text-mute: #5a5d3d; --text-quiet: #8a8b6a; --border: #b8b08a; --border-strong: #8a8260; --hairline: rgba(28,31,15,0.15); --nav-bg-scrolled: rgba(235,231,208,0.96); --selection: rgba(138,106,16,0.22); } html[data-theme="pixel"] { --bg: #f5f0e1; --bg-2: #ffffff; --bg-3: #ebe4d0; --bg-dark: #e0d8be; --accent: #b8860b; --accent-soft: #d49e1f; --text: #1a1c2e; --text-soft: #3d3f55; --text-mute: #6a6d80; --text-quiet: #98a0a8; --border: #b8860b; --border-strong: #1a1c2e; --hairline: rgba(184,134,11,0.22); --nav-bg-scrolled: rgba(245,240,225,0.98); --selection: rgba(184,134,11,0.3); } /* Matrix Awakening / printed code-rain on cream paper, not glowing on black. Aged-zine xerox aesthetic. Deep ink-green type on warm paper stock. */ html[data-theme="matrix"] { --bg: #f4ecd8; --bg-2: #faf3df; --bg-3: #ece4d0; --bg-dark: #e3dbc7; --accent: #16702e; --accent-soft: #1e8540; --text: #1c2a1e; --text-soft: #3a4a3c; --text-mute: #5a6a5c; --text-quiet: #889a8a; --border: #c8c1ad; --border-strong: #a8a190; --hairline: rgba(28,42,30,0.10); --nav-bg-scrolled: rgba(244,236,216,0.94); --selection: rgba(22,112,46,0.20); } /* Redteam Briefing / printed offensive-security after-action report. Bond-paper white with deep matte red ink and hard black framing rules. */ html[data-theme="redteam"] { --bg: #fafaf8; --bg-2: #ffffff; --bg-3: #f4f4f0; --bg-dark: #ebebe6; --accent: #b8252a; --accent-soft: #d63339; --text: #1a1a1a; --text-soft: #3a3a3a; --text-mute: #5a5a5a; --text-quiet: #8a8a8a; --border: #c8c8c4; --border-strong: #1a1a1a; --hairline: rgba(26,26,26,0.12); --nav-bg-scrolled: rgba(250,250,248,0.95); --selection: rgba(184,37,42,0.18); } /* Hologram Blueprint / engineering schematic on drafting paper. Deep technical-drawing cyan on bright white, grid behind, dimension-line aesthetic. */ html[data-theme="hologram"] { --bg: #fbfcfd; --bg-2: #ffffff; --bg-3: #f0f4f8; --bg-dark: #e0e8f0; --accent: #0a6e9e; --accent-soft: #1a8ec0; --text: #0a1a26; --text-soft: #2a3a48; --text-mute: #4a5a68; --text-quiet: #7a8a98; --border: #b8c8d4; --border-strong: #0a6e9e; --hairline: rgba(10,110,158,0.18); --nav-bg-scrolled: rgba(251,252,253,0.95); --selection: rgba(10,110,158,0.18); } /* Amber Printout / 1970s vector-printer output on thermal-paper. Warm cream paper, deep amber-brown ink, faint dot-matrix pin marks instead of CRT scanlines. */ html[data-theme="amber-crt"] { --bg: #f8f0d8; --bg-2: #fdf6e0; --bg-3: #f0e8d0; --bg-dark: #e0d8c0; --accent: #a8650a; --accent-soft: #c47e1e; --text: #2a1a08; --text-soft: #4a3618; --text-mute: #6a5028; --text-quiet: #8a7458; --border: #d8c8a8; --border-strong: #a8650a; --hairline: rgba(168,101,10,0.18); --nav-bg-scrolled: rgba(248,240,216,0.95); --selection: rgba(168,101,10,0.20); } } /* ── LIGHT-default themes → DARK variant ─────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-theme="corporate-clean"] { --bg: #0a1525; --bg-2: #112038; --bg-3: #0e1a2e; --bg-dark: #050b18; --accent: #4d9fe6; --accent-soft: #6cb0ec; --text: #f0f4fa; --text-soft: #c0cad8; --text-mute: #8a96a8; --text-quiet: #5e6a7c; --border: #1f2e44; --border-strong: #2d3f58; --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(10,21,37,0.95); --selection: rgba(77,159,230,0.22); } html[data-theme="creative-studio"] { --bg: #1a0f12; --bg-2: #261820; --bg-3: #1f1218; --bg-dark: #0d0608; --accent: #ff6b85; --accent-soft: #ff8aa0; --text: #fbeef0; --text-soft: #d8c0c6; --text-mute: #a08890; --text-quiet: #6a5860; --border: #3a2530; --border-strong: #553848; --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(26,15,18,0.92); --selection: rgba(255,107,133,0.25); } html[data-theme="brutalist"] { /* Brutalist stays brutal — pure black bg, white text, same orange accent. */ --bg: #0a0a0a; --bg-2: #000000; --bg-3: #141414; --bg-dark: #ffffff; --accent: #ff5500; --accent-soft: #ff7733; --text: #ffffff; --text-soft: #dddddd; --text-mute: #bbbbbb; --text-quiet: #777777; --border: #ffffff; --border-strong: #ffffff; --hairline: #ffffff; --nav-bg-scrolled: #0a0a0a; --selection: rgba(255,85,0,0.4); } html[data-theme="editorial"] { --bg: #1a1410; --bg-2: #221a14; --bg-3: #281f18; --bg-dark: #faf6ef; --accent: #d65a3a; --accent-soft: #e87a5a; --text: #f5ead8; --text-soft: #d6c4a8; --text-mute: #a8967a; --text-quiet: #786650; --border: #3d2e22; --border-strong: #5a4530; --hairline: rgba(245,234,216,0.08); --nav-bg-scrolled: rgba(26,20,16,0.96); --selection: rgba(214,90,58,0.25); } html[data-theme="minimal-luxury"] { --bg: #0a0a0a; --bg-2: #141414; --bg-3: #1c1c1c; --bg-dark: #ffffff; --accent: #d4b97a; --accent-soft: #e8d098; --text: #fafafa; --text-soft: #aaaaaa; --text-mute: #666666; --text-quiet: #404040; --border: #1f1f1f; --border-strong: #2d2d2d; --hairline: rgba(255,255,255,0.04); --nav-bg-scrolled: rgba(10,10,10,0.98); --selection: rgba(212,185,122,0.22); } html[data-theme="newspaper"] { /* Late-edition: ink-on-paper inverts to paper-on-ink. */ --bg: #1a1410; --bg-2: #221a14; --bg-3: #110d0a; --bg-dark: #f4ecd8; --accent: #e8d8a8; --accent-soft: #f0e2bc; --text: #f4ecd8; --text-soft: #d6c8a8; --text-mute: #9a8e75; --text-quiet: #6a6050; --border: #f4ecd8; --border-strong: #f4ecd8; --hairline: rgba(244,236,216,0.25); --nav-bg-scrolled: #1a1410; --selection: rgba(244,236,216,0.2); } html[data-theme="memphis"] { --bg: #0a0524; --bg-2: #14093a; --bg-3: #1a0d4a; --bg-dark: #fef6e4; --accent: #ffa5c5; --accent-soft: #ffc0d8; --text: #fef6e4; --text-soft: #d8d0c0; --text-mute: #a09888; --text-quiet: #6a6458; --border: #ffa5c5; --border-strong: #ffa5c5; --hairline: rgba(255,165,197,0.15); --nav-bg-scrolled: rgba(10,5,36,0.96); --selection: rgba(255,165,197,0.32); } html[data-theme="y2k"] { --bg: #001433; --bg-2: #002255; --bg-3: #001a44; --bg-dark: #c2e9ff; --accent: #4dc8ff; --accent-soft: #7dd6ff; --text: #e0f0ff; --text-soft: #a8c8e8; --text-mute: #7898b8; --text-quiet: #506880; --border: rgba(77,200,255,0.22); --border-strong: rgba(77,200,255,0.5); --hairline: rgba(77,200,255,0.08); --nav-bg-scrolled: rgba(0,20,51,0.92); --selection: rgba(77,200,255,0.25); } html[data-theme="sketch"] { --bg: #1a1815; --bg-2: #221f1a; --bg-3: #15130f; --bg-dark: #fffef7; --accent: #e8e4dc; --accent-soft: #f5f1e8; --text: #e8e4dc; --text-soft: #c0baae; --text-mute: #8a847a; --text-quiet: #5a544c; --border: #e8e4dc; --border-strong: #e8e4dc; --hairline: rgba(232,228,220,0.18); --nav-bg-scrolled: rgba(26,24,21,0.96); --selection: rgba(232,90,79,0.3); } html[data-theme="material"] { --bg: #1c1b1f; --bg-2: #2b2930; --bg-3: #211f24; --bg-dark: #fef7ff; --accent: #b8a5e5; --accent-soft: #c8b8eb; --text: #e6e1e5; --text-soft: #c9c5d0; --text-mute: #938f99; --text-quiet: #5f5b66; --border: #38353e; --border-strong: #4f4b56; --hairline: rgba(230,225,229,0.05); --nav-bg-scrolled: rgba(28,27,31,0.96); --selection: rgba(184,165,229,0.22); } html[data-theme="swiss"] { /* Swiss inverts to pure black with red accent preserved — modernism intact. */ --bg: #0a0a0a; --bg-2: #141414; --bg-3: #1c1c1c; --bg-dark: #ffffff; --accent: #ff0000; --accent-soft: #ff3333; --text: #ffffff; --text-soft: #e0e0e0; --text-mute: #888888; --text-quiet: #444444; --border: #ffffff; --border-strong: #ffffff; --hairline: rgba(255,255,255,0.12); --nav-bg-scrolled: rgba(10,10,10,0.98); --selection: rgba(255,0,0,0.3); } html[data-theme="liquid"] { --bg: #0a0a14; --bg-2: rgba(255,255,255,0.06); --bg-3: rgba(255,255,255,0.04); --bg-dark: #e8e3dc; --accent: #a8b8d0; --accent-soft: #c0cce0; --text: #f0eee8; --text-soft: #c8c2b8; --text-mute: #8a8478; --text-quiet: #5a5448; --border: rgba(168,184,208,0.22); --border-strong: rgba(168,184,208,0.45); --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(10,10,20,0.55); --selection: rgba(196,165,119,0.35); } } /* Selection state for every theme */ ::selection { background: var(--selection); color: var(--text); }