/* * OI! — Palette System * 5 outdoor-themed palettes × dark/light modes = 10 variants * Overrides :root CSS vars from styles.css * Applied via data-palette attribute on * * Topo background SVG is embedded per-palette as a CSS background. */ /* ═══════════════════════════════════════════ 1. MIDNIGHT EMBER — Burnt orange + charcoal ═══════════════════════════════════════════ */ /* Dark */ [data-palette="midnight-ember"] { --bg: #1a1a1f; --bg-card: #2a2a30; --bg-panel: #242429; --bg-hover: rgba(212,98,42,0.08); --bg-input: #1a1a1f; --surface: #1a1a1f; --surface2: #242429; --surface3: #2a2a30; --bubble-other: #2a2a30; --border: rgba(212,98,42,0.15); --border-2: rgba(212,98,42,0.20); --text: #e8e4df; --text-2: #d4d0cb; --text-3: #8a8580; --text-4: #6e6a65; --text-5: #4a4742; --text-muted: #8a8580; --accent: #d4622a; --accent-hover:#e8743a; --green: #d4622a; --green-bg: rgba(212,98,42,0.06); --green-border:rgba(212,98,42,0.25); --card: #2a2a30; --card-border:rgba(212,98,42,0.15); --topo-stroke: rgba(212,98,42,0.12); } /* Light */ [data-palette="midnight-ember"][data-theme="light"] { --bg: #faf7f4; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(196,81,26,0.06); --bg-input: #ffffff; --surface: #faf7f4; --surface2: #f2eeea; --surface3: #e8e4df; --bubble-other: #f2eeea; --border: rgba(196,81,26,0.12); --border-2: rgba(196,81,26,0.18); --text: #1a1a1f; --text-2: #3a3530; --text-3: #8a7e75; --text-4: #a09488; --text-5: #c0b5aa; --text-muted: #8a7e75; --accent: #c4511a; --accent-hover:#d4622a; --green: #c4511a; --green-bg: rgba(196,81,26,0.08); --green-border:rgba(196,81,26,0.25); --card: #ffffff; --card-border:rgba(196,81,26,0.12); --topo-stroke: rgba(196,81,26,0.09); } /* ═══════════════════════════════════════════ 2. ALPINE DUSK — Amber gold + deep navy ═══════════════════════════════════════════ */ /* Dark */ [data-palette="alpine-dusk"] { --bg: #111827; --bg-card: #1f2a40; --bg-panel: #1a2236; --bg-hover: rgba(212,160,60,0.08); --bg-input: #111827; --surface: #111827; --surface2: #1a2236; --surface3: #1f2a40; --bubble-other: #1f2a40; --border: rgba(212,160,60,0.15); --border-2: rgba(212,160,60,0.20); --text: #e5e0d8; --text-2: #c8c3bb; --text-3: #7d8694; --text-4: #5d6674; --text-5: #3d4654; --text-muted: #7d8694; --accent: #d4a03c; --accent-hover:#e8b44e; --green: #d4a03c; --green-bg: rgba(212,160,60,0.05); --green-border:rgba(212,160,60,0.25); --card: #1f2a40; --card-border:rgba(212,160,60,0.15); --topo-stroke: rgba(212,160,60,0.10); } /* Light */ [data-palette="alpine-dusk"][data-theme="light"] { --bg: #f5f6fa; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(184,134,46,0.06); --bg-input: #ffffff; --surface: #f5f6fa; --surface2: #eceef5; --surface3: #dde0ea; --bubble-other: #eceef5; --border: rgba(184,134,46,0.14); --border-2: rgba(184,134,46,0.20); --text: #111827; --text-2: #2a3040; --text-3: #6b7280; --text-4: #8b9298; --text-5: #b0b6be; --text-muted: #6b7280; --accent: #b8862e; --accent-hover:#d4a03c; --green: #b8862e; --green-bg: rgba(184,134,46,0.08); --green-border:rgba(184,134,46,0.25); --card: #ffffff; --card-border:rgba(184,134,46,0.14); --topo-stroke: rgba(184,134,46,0.08); } /* ═══════════════════════════════════════════ 3. TIMBER & SAGE — Sage green + warm slate ═══════════════════════════════════════════ */ /* Dark */ [data-palette="timber-sage"] { --bg: #1c1f1e; --bg-card: #2a302d; --bg-panel: #232826; --bg-hover: rgba(107,154,110,0.08); --bg-input: #1c1f1e; --surface: #1c1f1e; --surface2: #232826; --surface3: #2a302d; --bubble-other: #2a302d; --border: rgba(107,154,110,0.15); --border-2: rgba(107,154,110,0.20); --text: #dde0db; --text-2: #c0c4bc; --text-3: #7a8279; --text-4: #5c645a; --text-5: #3e4640; --text-muted: #7a8279; --accent: #6b9a6e; --accent-hover:#7db880; --green: #6b9a6e; --green-bg: rgba(107,154,110,0.05); --green-border:rgba(107,154,110,0.25); --card: #2a302d; --card-border:rgba(107,154,110,0.15); --topo-stroke: rgba(107,154,110,0.10); } /* Light */ [data-palette="timber-sage"][data-theme="light"] { --bg: #f6f7f5; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(78,125,81,0.06); --bg-input: #ffffff; --surface: #f6f7f5; --surface2: #eef0eb; --surface3: #dde2d8; --bubble-other: #eef0eb; --border: rgba(78,125,81,0.13); --border-2: rgba(78,125,81,0.18); --text: #1c1f1e; --text-2: #2e3530; --text-3: #6b756a; --text-4: #8a9488; --text-5: #b0baa8; --text-muted: #6b756a; --accent: #4e7d51; --accent-hover:#5e9462; --green: #4e7d51; --green-bg: rgba(78,125,81,0.07); --green-border:rgba(78,125,81,0.25); --card: #ffffff; --card-border:rgba(78,125,81,0.13); --topo-stroke: rgba(78,125,81,0.08); } /* ═══════════════════════════════════════════ 4. GRANITE RIDGE — Copper/terracotta + black ═══════════════════════════════════════════ */ /* Dark */ [data-palette="granite-ridge"] { --bg: #0f0f0f; --bg-card: #1e1e1e; --bg-panel: #181818; --bg-hover: rgba(196,122,90,0.08); --bg-input: #0f0f0f; --surface: #0f0f0f; --surface2: #181818; --surface3: #1e1e1e; --bubble-other: #1e1e1e; --border: rgba(196,122,90,0.15); --border-2: rgba(196,122,90,0.20); --text: #ebe6e0; --text-2: #cec9c3; --text-3: #7a7570; --text-4: #5c5752; --text-5: #3e3a35; --text-muted: #7a7570; --accent: #c47a5a; --accent-hover:#d88e6c; --green: #c47a5a; --green-bg: rgba(196,122,90,0.05); --green-border:rgba(196,122,90,0.25); --card: #1e1e1e; --card-border:rgba(196,122,90,0.15); --topo-stroke: rgba(196,122,90,0.10); } /* Light */ [data-palette="granite-ridge"][data-theme="light"] { --bg: #f8f5f2; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(168,96,62,0.06); --bg-input: #ffffff; --surface: #f8f5f2; --surface2: #f0ebe6; --surface3: #e4ded8; --bubble-other: #f0ebe6; --border: rgba(168,96,62,0.13); --border-2: rgba(168,96,62,0.18); --text: #1a1714; --text-2: #342e28; --text-3: #8a7d72; --text-4: #a09488; --text-5: #c0b4a8; --text-muted: #8a7d72; --accent: #a8603e; --accent-hover:#c47a5a; --green: #a8603e; --green-bg: rgba(168,96,62,0.07); --green-border:rgba(168,96,62,0.25); --card: #ffffff; --card-border:rgba(168,96,62,0.13); --topo-stroke: rgba(168,96,62,0.08); } /* ═══════════════════════════════════════════ 5. BOREAL NIGHT — Ice blue + dark forest ═══════════════════════════════════════════ */ /* Dark */ [data-palette="boreal-night"] { --bg: #0e1512; --bg-card: #1a2820; --bg-panel: #152018; --bg-hover: rgba(91,164,181,0.08); --bg-input: #0e1512; --surface: #0e1512; --surface2: #152018; --surface3: #1a2820; --bubble-other: #1a2820; --border: rgba(91,164,181,0.15); --border-2: rgba(91,164,181,0.20); --text: #d6e0d8; --text-2: #b8c4bc; --text-3: #6a7d70; --text-4: #4c5f52; --text-5: #304238; --text-muted: #6a7d70; --accent: #5ba4b5; --accent-hover:#6dc0d4; --green: #5ba4b5; --green-bg: rgba(91,164,181,0.05); --green-border:rgba(91,164,181,0.25); --card: #1a2820; --card-border:rgba(91,164,181,0.15); --topo-stroke: rgba(91,164,181,0.10); } /* Light */ [data-palette="boreal-night"][data-theme="light"] { --bg: #f3f7f5; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-hover: rgba(58,138,154,0.06); --bg-input: #ffffff; --surface: #f3f7f5; --surface2: #e8efeb; --surface3: #d8e2dc; --bubble-other: #e8efeb; --border: rgba(58,138,154,0.13); --border-2: rgba(58,138,154,0.18); --text: #0e1512; --text-2: #243028; --text-3: #5e7268; --text-4: #7e9288; --text-5: #a0b4a8; --text-muted: #5e7268; --accent: #3a8a9a; --accent-hover:#4aa0b2; --green: #3a8a9a; --green-bg: rgba(58,138,154,0.07); --green-border:rgba(58,138,154,0.25); --card: #ffffff; --card-border:rgba(58,138,154,0.13); --topo-stroke: rgba(58,138,154,0.07); } /* ═══════════════════════════════════════════ Topo Background SVG per palette ═══════════════════════════════════════════ */ /* Base topo SVG — stroke color set via CSS filter + opacity */ [data-palette] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='none'%3E%3Cpath d='M-50,180 Q100,120 200,160 T400,140 T600,170 T850,130' fill='none' stroke='%23888' stroke-width='1'/%3E%3Cpath d='M-50,220 Q120,180 250,200 T450,185 T620,210 T850,175' fill='none' stroke='%23888' stroke-width='0.8'/%3E%3Cpath d='M-50,260 Q80,230 200,250 T420,230 T580,260 T850,225' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3Cpath d='M-50,300 Q150,270 280,290 T480,275 T650,300 T850,268' fill='none' stroke='%23888' stroke-width='0.6'/%3E%3Cpath d='M-50,340 Q100,310 220,330 T440,315 T610,340 T850,310' fill='none' stroke='%23888' stroke-width='1'/%3E%3Cpath d='M-50,140 Q130,100 260,125 T470,108 T640,135 T850,100' fill='none' stroke='%23888' stroke-width='0.7'/%3E%3Cpath d='M-50,380 Q110,360 230,370 T460,355 T630,378 T850,350' fill='none' stroke='%23888' stroke-width='0.9'/%3E%3Cpath d='M-50,100 Q160,70 300,90 T500,75 T680,95 T850,65' fill='none' stroke='%23888' stroke-width='0.5'/%3E%3Cpath d='M-50,420 Q140,395 270,408 T490,392 T660,415 T850,390' fill='none' stroke='%23888' stroke-width='0.8'/%3E%3Cellipse cx='300' cy='230' rx='120' ry='50' fill='none' stroke='%23888' stroke-width='0.7' transform='rotate(-8,300,230)'/%3E%3Cellipse cx='300' cy='230' rx='80' ry='30' fill='none' stroke='%23888' stroke-width='0.5' transform='rotate(-8,300,230)'/%3E%3Cellipse cx='580' cy='310' rx='90' ry='40' fill='none' stroke='%23888' stroke-width='0.6' transform='rotate(5,580,310)'/%3E%3Cellipse cx='580' cy='310' rx='55' ry='22' fill='none' stroke='%23888' stroke-width='0.4' transform='rotate(5,580,310)'/%3E%3Cellipse cx='150' cy='360' rx='70' ry='35' fill='none' stroke='%23888' stroke-width='0.5' transform='rotate(-12,150,360)'/%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Tint via opacity per palette — dark modes are subtle, light modes even more so */ [data-palette="midnight-ember"] body::before { opacity: 0.12; filter: hue-rotate(-15deg) saturate(3) brightness(0.6); } [data-palette="alpine-dusk"] body::before { opacity: 0.10; filter: hue-rotate(25deg) saturate(2) brightness(0.5); } [data-palette="timber-sage"] body::before { opacity: 0.10; filter: hue-rotate(80deg) saturate(2) brightness(0.5); } [data-palette="granite-ridge"] body::before { opacity: 0.10; filter: hue-rotate(-5deg) saturate(2) brightness(0.5); } [data-palette="boreal-night"] body::before { opacity: 0.10; filter: hue-rotate(140deg) saturate(2) brightness(0.5); } /* Light mode — even more subtle */ [data-palette="midnight-ember"][data-theme="light"] body::before { opacity: 0.06; filter: hue-rotate(-15deg) saturate(2) brightness(0.8); } [data-palette="alpine-dusk"][data-theme="light"] body::before { opacity: 0.05; filter: hue-rotate(25deg) saturate(1.5) brightness(0.7); } [data-palette="timber-sage"][data-theme="light"] body::before { opacity: 0.05; filter: hue-rotate(80deg) saturate(1.5) brightness(0.7); } [data-palette="granite-ridge"][data-theme="light"] body::before { opacity: 0.05; filter: hue-rotate(-5deg) saturate(1.5) brightness(0.7); } [data-palette="boreal-night"][data-theme="light"] body::before { opacity: 0.04; filter: hue-rotate(140deg) saturate(1.5) brightness(0.7); } /* Ensure content stays above topo */ body > * { position: relative; z-index: 1; }