/* themes.css — every palette as a selectable theme. Default (:root) = Original; html[data-theme=""] overrides it. skin.css reads these via var(--token); switch by setting data-theme on . This is the exact mechanism a site-wide switcher would use. */ :root { --bg: #000000; --surface: #16213e; --surface2: #1c3326; --surface3: #244430; --text: #f5f5f5; --muted: #aab0b8; --strong: #1E90FF; --heading: #00d4ff; --h2: #e74c3c; --h3: #2ecc71; --h4: #00d4ff; --rule: #0f3460; --border: #2c4d3a; --accent: #00d4ff; --accent-h: #f39c12; --on-accent: #ffffff; --pill-bg: #243b6b; --pill-border: #4a6aa8; --pill-text: #ffffff; --note: #2a1f0d; --note-text: #f5f5f5; --note-accent: #f39c12; --code: #f39c12; --glow: rgba(0,212,255,0.18); --nav-grad: linear-gradient(135deg, #0a1628 0%, #0f3460 55%, #162850 100%); --nav-text: #e0e0e0; --nav-accent: #00d4ff; --nav-surface: #16213e; --nav-menu-text: #c8d0da; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1c3326; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #0f3460; --switch-text: #e0e0e0; --switch-active-bg: #00d4ff; --switch-active-text: #162850; } /* Original — Midnight Cyan */ html[data-theme="original"] { --bg: #000000; --surface: #16213e; --surface2: #1c3326; --surface3: #244430; --text: #f5f5f5; --muted: #aab0b8; --strong: #1E90FF; --heading: #00d4ff; --h2: #e74c3c; --h3: #2ecc71; --h4: #00d4ff; --rule: #0f3460; --border: #2c4d3a; --accent: #00d4ff; --accent-h: #f39c12; --on-accent: #ffffff; --pill-bg: #243b6b; --pill-border: #4a6aa8; --pill-text: #ffffff; --note: #2a1f0d; --note-text: #f5f5f5; --note-accent: #f39c12; --code: #f39c12; --glow: rgba(0,212,255,0.18); --nav-grad: linear-gradient(135deg, #0a1628 0%, #0f3460 55%, #162850 100%); --nav-text: #e0e0e0; --nav-accent: #00d4ff; --nav-surface: #16213e; --nav-menu-text: #c8d0da; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1c3326; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #0f3460; --switch-text: #e0e0e0; --switch-active-bg: #00d4ff; --switch-active-text: #162850; } /* Charcoal Cyan */ html[data-theme="charcoal-cyan"] { --bg: #0e1419; --surface: #17212b; --surface2: #1c2733; --surface3: #243240; --text: #d9dee4; --muted: #95a0ab; --strong: #6fd3ec; --heading: #35c6e3; --h2: #e8836f; --h3: #56c98c; --h4: #2bbede; --rule: #20303d; --border: #28333f; --accent: #2bbede; --accent-h: #f0a85a; --on-accent: #0a1014; --pill-bg: #1c2733; --pill-border: #28333f; --pill-text: #2bbede; --note: #241a0c; --note-text: #d9dee4; --note-accent: #f0a85a; --code: #e8836f; --glow: rgba(43,190,222,0.16); --nav-grad: linear-gradient(135deg, #0c1620 0%, #0f2233 55%, #122a3e 100%); --nav-text: #d6e6ef; --nav-accent: #35c6e3; --nav-surface: #17212b; --nav-menu-text: #d9dee4; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1c2733; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #0f2233; --switch-text: #d6e6ef; --switch-active-bg: #35c6e3; --switch-active-text: #122a3e; } /* Deep Forest */ html[data-theme="deep-forest"] { --bg: #0d130f; --surface: #16201a; --surface2: #1b271f; --surface3: #233028; --text: #d7e0d8; --muted: #93a397; --strong: #79d6a6; --heading: #45c389; --h2: #e0915a; --h3: #57c98f; --h4: #3fbd84; --rule: #1f2e25; --border: #273429; --accent: #3fbd84; --accent-h: #e0915a; --on-accent: #0a130d; --pill-bg: #1b271f; --pill-border: #273429; --pill-text: #3fbd84; --note: #20210f; --note-text: #d7e0d8; --note-accent: #e0915a; --code: #e0915a; --glow: rgba(63,189,132,0.16); --nav-grad: linear-gradient(135deg, #0e1c14 0%, #112a1e 55%, #123426 100%); --nav-text: #d8ece0; --nav-accent: #54d29a; --nav-surface: #16201a; --nav-menu-text: #d7e0d8; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1b271f; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #112a1e; --switch-text: #d8ece0; --switch-active-bg: #54d29a; --switch-active-text: #123426; } /* Midnight Navy */ html[data-theme="midnight-navy"] { --bg: #0e1421; --surface: #18202f; --surface2: #1d2738; --surface3: #243246; --text: #d6dce6; --muted: #94a0b0; --strong: #7fb0e6; --heading: #5b9bd5; --h2: #e88a6f; --h3: #6fa8de; --h4: #5398d8; --rule: #20304a; --border: #283448; --accent: #5398d8; --accent-h: #e8a05a; --on-accent: #0a1018; --pill-bg: #1d2738; --pill-border: #283448; --pill-text: #5398d8; --note: #211b0f; --note-text: #d6dce6; --note-accent: #e8a05a; --code: #e88a6f; --glow: rgba(83,152,216,0.16); --nav-grad: linear-gradient(135deg, #0d1726 0%, #102036 55%, #122948 100%); --nav-text: #d6e2f0; --nav-accent: #6cb0ec; --nav-surface: #18202f; --nav-menu-text: #d6dce6; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1d2738; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #102036; --switch-text: #d6e2f0; --switch-active-bg: #6cb0ec; --switch-active-text: #122948; } /* Deep Plum */ html[data-theme="deep-plum"] { --bg: #14101a; --surface: #1f1a28; --surface2: #261f31; --surface3: #2f273d; --text: #ddd6e4; --muted: #a097ad; --strong: #bda3ec; --heading: #a98fe0; --h2: #e088a8; --h3: #9f86d6; --h4: #a586e0; --rule: #2c2440; --border: #332b44; --accent: #a586e0; --accent-h: #e58aaa; --on-accent: #110c18; --pill-bg: #261f31; --pill-border: #332b44; --pill-text: #a586e0; --note: #261a20; --note-text: #ddd6e4; --note-accent: #e58aaa; --code: #e088a8; --glow: rgba(165,134,224,0.16); --nav-grad: linear-gradient(135deg, #1a1428 0%, #221a36 55%, #2a2044 100%); --nav-text: #e6def0; --nav-accent: #bda3ec; --nav-surface: #1f1a28; --nav-menu-text: #ddd6e4; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #261f31; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #221a36; --switch-text: #e6def0; --switch-active-bg: #bda3ec; --switch-active-text: #2a2044; } /* Warm Espresso */ html[data-theme="warm-espresso"] { --bg: #15110d; --surface: #201a14; --surface2: #28201a; --surface3: #322820; --text: #e3dccf; --muted: #a89b86; --strong: #e3b07a; --heading: #d99a5c; --h2: #e0795a; --h3: #c9a36a; --h4: #cf9152; --rule: #322619; --border: #38301f; --accent: #cf9152; --accent-h: #6bb6a6; --on-accent: #120d08; --pill-bg: #28201a; --pill-border: #38301f; --pill-text: #cf9152; --note: #2a1f0d; --note-text: #e3dccf; --note-accent: #6bb6a6; --code: #e0795a; --glow: rgba(207,145,82,0.16); --nav-grad: linear-gradient(135deg, #1d1610 0%, #261c12 55%, #2f2316 100%); --nav-text: #efe4d4; --nav-accent: #e0a468; --nav-surface: #201a14; --nav-menu-text: #e3dccf; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #28201a; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #261c12; --switch-text: #efe4d4; --switch-active-bg: #e0a468; --switch-active-text: #2f2316; } /* Slate Teal */ html[data-theme="slate-teal"] { --bg: #0e1518; --surface: #182227; --surface2: #1d292f; --surface3: #243339; --text: #d7dee1; --muted: #93a1a6; --strong: #6fd0c8; --heading: #3fb8ad; --h2: #e0a45a; --h3: #4cc2b6; --h4: #36b3a8; --rule: #203035; --border: #28353a; --accent: #36b3a8; --accent-h: #e0a45a; --on-accent: #0a1113; --pill-bg: #1d292f; --pill-border: #28353a; --pill-text: #36b3a8; --note: #26200f; --note-text: #d7dee1; --note-accent: #e0a45a; --code: #e0a45a; --glow: rgba(54,179,168,0.16); --nav-grad: linear-gradient(135deg, #0d1a1e 0%, #102529 55%, #123035 100%); --nav-text: #d6ebe9; --nav-accent: #45c7bb; --nav-surface: #182227; --nav-menu-text: #d7dee1; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #1d292f; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #102529; --switch-text: #d6ebe9; --switch-active-bg: #45c7bb; --switch-active-text: #123035; } /* Graphite Rose */ html[data-theme="graphite-rose"] { --bg: #121013; --surface: #1d1a1e; --surface2: #242025; --surface3: #2c272e; --text: #ddd9dd; --muted: #a39ca3; --strong: #e3a0b4; --heading: #d98aa0; --h2: #d9b066; --h3: #c98ea2; --h4: #d27e96; --rule: #2c262c; --border: #332d33; --accent: #d27e96; --accent-h: #d9b066; --on-accent: #120f12; --pill-bg: #242025; --pill-border: #332d33; --pill-text: #d27e96; --note: #281f10; --note-text: #ddd9dd; --note-accent: #d9b066; --code: #d9b066; --glow: rgba(210,126,150,0.16); --nav-grad: linear-gradient(135deg, #1a161a 0%, #211c22 55%, #29222a 100%); --nav-text: #ece4e8; --nav-accent: #e3a0b4; --nav-surface: #1d1a1e; --nav-menu-text: #ddd9dd; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #242025; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #211c22; --switch-text: #ece4e8; --switch-active-bg: #e3a0b4; --switch-active-text: #29222a; } /* Deep Ocean */ html[data-theme="deep-ocean"] { --bg: #0b1418; --surface: #142026; --surface2: #18272e; --surface3: #1f323a; --text: #d6e0e3; --muted: #91a2a8; --strong: #6fd2d6; --heading: #3cc2c6; --h2: #e88a6f; --h3: #4cc7cb; --h4: #33b8bc; --rule: #1d2f36; --border: #25343b; --accent: #33b8bc; --accent-h: #e88a6f; --on-accent: #091115; --pill-bg: #18272e; --pill-border: #25343b; --pill-text: #33b8bc; --note: #211b0f; --note-text: #d6e0e3; --note-accent: #e88a6f; --code: #e88a6f; --glow: rgba(51,184,188,0.16); --nav-grad: linear-gradient(135deg, #0a1820 0%, #0d2530 55%, #0f303d 100%); --nav-text: #d6ecee; --nav-accent: #45c9cd; --nav-surface: #142026; --nav-menu-text: #d6e0e3; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #18272e; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #0d2530; --switch-text: #d6ecee; --switch-active-bg: #45c9cd; --switch-active-text: #0f303d; } /* Dark Moss */ html[data-theme="dark-moss"] { --bg: #12130d; --surface: #1d1f14; --surface2: #24261a; --surface3: #2d2f20; --text: #e0e1cf; --muted: #a5a587; --strong: #cdcf7a; --heading: #bcc25a; --h2: #e0905a; --h3: #aeb85a; --h4: #b2bb52; --rule: #2c2e1a; --border: #34361f; --accent: #b2bb52; --accent-h: #e0905a; --on-accent: #101109; --pill-bg: #24261a; --pill-border: #34361f; --pill-text: #b2bb52; --note: #2a2410; --note-text: #e0e1cf; --note-accent: #e0905a; --code: #e0905a; --glow: rgba(178,187,82,0.16); --nav-grad: linear-gradient(135deg, #1a1c10 0%, #212413 55%, #292c17 100%); --nav-text: #ebecd6; --nav-accent: #cdd266; --nav-surface: #1d1f14; --nav-menu-text: #e0e1cf; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #24261a; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #212413; --switch-text: #ebecd6; --switch-active-bg: #cdd266; --switch-active-text: #292c17; } /* Burgundy Night */ html[data-theme="burgundy-night"] { --bg: #150e11; --surface: #20171b; --surface2: #281d22; --surface3: #31242a; --text: #e2d6da; --muted: #ad999f; --strong: #e9a0ac; --heading: #d97a8c; --h2: #e0a85a; --h3: #cf7e98; --h4: #d2697f; --rule: #322029; --border: #38262e; --accent: #d2697f; --accent-h: #e0a85a; --on-accent: #130b0e; --pill-bg: #281d22; --pill-border: #38262e; --pill-text: #d2697f; --note: #2a1810; --note-text: #e2d6da; --note-accent: #e0a85a; --code: #e0a85a; --glow: rgba(210,105,127,0.16); --nav-grad: linear-gradient(135deg, #1d1014 0%, #26151a 55%, #2f1a20 100%); --nav-text: #f0e0e4; --nav-accent: #e3909e; --nav-surface: #20171b; --nav-menu-text: #e2d6da; --nav-hover: rgba(255,255,255,0.14); --nav-hover2: #281d22; --nav-dot: rgba(255,255,255,0.45); --switch-bg: #26151a; --switch-text: #f0e0e4; --switch-active-bg: #e3909e; --switch-active-text: #2f1a20; }