/* ═══════════════════════════════════════════════════════════ Global Theme System — data-style + data-mode on Styles: win95 | got | modern | brutal | term Modes: light | dark ═══════════════════════════════════════════════════════════ */ /* W95FA @font-face moved to fonts/fonts.css */ /* ── Per-theme constants (mode-agnostic) ────────────────── Variables that don't change between light/dark live at the theme level, so the mode blocks below only carry colour deltas. */ html[data-style="win95"] { --body-font: 'W95FA', 'MS Sans Serif', Arial, sans-serif; --win-radius: 0; } html[data-style="got"] { --body-font: 'Cinzel', serif; --win-radius: 0; } html[data-style="modern"] { --body-font: -apple-system, BlinkMacSystemFont, 'Manrope', system-ui, sans-serif; --win-radius: 16px; } html[data-style="brutal"] { --body-font: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --win-radius: 10px; } html[data-style="term"] { --body-font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --win-radius: 0; --win-shadow: none; } /* ── Win95 Light ─────────────────────────────────────────── */ html[data-style="win95"][data-mode="light"] { --dt-bg: #008080; --win-bg: #c0c0c0; --win-bt: 2px solid #dfdfdf; --win-bl: 2px solid #dfdfdf; --win-br: 2px solid #404040; --win-bb: 2px solid #404040; --win-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #868a8e, 1px 1px 0 #000; --titlebar: linear-gradient(to right, #000080, #1084d0); --titlebar-fg: #ffffff; --text: #000000; --text-muted: #444444; --hover-bg: #000080; --hover-fg: #ffffff; --div-top: #868a8e; --div-bot: #dfdfdf; --taskbar-bg: #c0c0c0; --taskbar-top: #dfdfdf; --icon-label: #ffffff; --icon-shadow: 1px 1px 2px rgba(0,0,0,0.85); --icon-sel: rgba(0,0,128,0.35); --empty-color: #868a8e; --btn-lt: #dfdfdf; --btn-dk: #404040; --btn-lt-inner: #ffffff; --btn-dk-inner: #868a8e; --btn-face: #c0c0c0; --btn-active-bg: #000080; --btn-active-fg: #ffffff; --panel-bg: #c0c0c0; --panel-sep: #868a8e; --header-bg: #c0c0c0; --header-border: #868a8e; --header-text: #000000; --header-btn-bg: #c0c0c0; --header-btn-border: #868a8e; --header-btn-text: #000000; --nav-bg: #c0c0c0; --nav-border: #868a8e; --nav-text: #000000; --nav-muted: #444444; --nav-active: #000080; --ham-line: #000000; --ham-border: #868a8e; /* SVG tree */ --gK-c1:#cc0000; --gK-c2:#880000; --gQ-c1:#880088; --gQ-c2:#4a0058; --gP-c1:#0000cc; --gP-c2:#00006a; --gO-c1:#888888; --gO-c2:#505050; --gB-c1:#886633; --gB-c2:#5a3e22; --label-color:#000080; --letter-color:rgba(255,255,255,0.92); --era-color:rgba(0,0,128,0.32); } /* ── Win95 Dark ──────────────────────────────────────────── */ html[data-style="win95"][data-mode="dark"] { --dt-bg: #0c0c1e; --win-bg: #1c1c30; --win-bt: 2px solid #3c3c58; --win-bl: 2px solid #3c3c58; --win-br: 2px solid #08080e; --win-bb: 2px solid #08080e; --win-shadow: inset 1px 1px 0 #4a4a68, inset -1px -1px 0 #0c0c18, 1px 1px 0 #000; --titlebar: linear-gradient(to right, #000040, #0a2a70); --titlebar-fg: #7ab0f0; --text: #c8c8e8; --text-muted: #607090; --hover-bg: #000050; --hover-fg: #7ab0f0; --div-top: #3c3c58; --div-bot: #08080e; --taskbar-bg: #14142a; --taskbar-top: #3c3c58; --icon-label: #c8c8e8; --icon-shadow: 1px 1px 2px #000; --icon-sel: rgba(0,0,80,0.5); --empty-color: #607090; --btn-lt: #3c3c58; --btn-dk: #08080e; --btn-lt-inner: #4a4a68; --btn-dk-inner: #0c0c18; --btn-face: #1c1c30; --btn-active-bg: #000060; --btn-active-fg: #7ab0f0; --panel-bg: #1c1c30; --panel-sep: #3c3c58; --header-bg: #14142a; --header-border: #3c3c58; --header-text: #7ab0f0; --header-btn-bg: #1c1c30; --header-btn-border: #3c3c58; --header-btn-text: #7ab0f0; --nav-bg: #0e0e20; --nav-border: #3c3c58; --nav-text: #c8c8e8; --nav-muted: #607090; --nav-active: #0050b0; --ham-line: #7ab0f0; --ham-border: #3c3c58; /* SVG tree */ --gK-c1:#800000; --gK-c2:#3a0000; --gQ-c1:#600060; --gQ-c2:#280032; --gP-c1:#000080; --gP-c2:#00003a; --gO-c1:#303030; --gO-c2:#181818; --gB-c1:#4a3820; --gB-c2:#201808; --label-color:#c0c0c0; --letter-color:rgba(255,255,255,0.85); --era-color:rgba(192,192,192,0.28); } /* ── Game of Thrones Light (illuminated manuscript) ──────── */ /* Parchment texture: SVG fractalNoise tinted warm sepia, encoded inline. ~1 KB on the wire, scales to any viewport without sharpness loss. The noise is layered as background-image OVER the cream base colour, so panels / drawers (with their own --win-bg) sit on a clean cream surface and only the desktop wallpaper shows the grain. */ html[data-style="got"][data-mode="light"] { --dt-bg: url("data:image/svg+xml;charset=utf-8,") repeat, #ede0c0; --win-bg: #f7eed5; --win-bt: 1px solid rgba(122,21,16,0.2); --win-bl: 1px solid rgba(122,21,16,0.2); --win-br: 1px solid rgba(122,21,16,0.2); --win-bb: 1px solid rgba(122,21,16,0.2); --win-shadow: 2px 2px 0 rgba(45,27,14,0.08); --titlebar: #f7eed5; --titlebar-fg: #7a1510; --text: #2d1b0e; --text-muted: #6b5236; --hover-bg: rgba(122,21,16,0.08); --hover-fg: #7a1510; --div-top: rgba(122,21,16,0.18); --div-bot: transparent; --taskbar-bg: #f7eed5; --taskbar-top: rgba(122,21,16,0.2); --icon-label: #2d1b0e; --icon-shadow: none; --icon-sel: rgba(122,21,16,0.12); --empty-color: #a89070; --btn-lt: rgba(122,21,16,0.25); --btn-dk: rgba(122,21,16,0.25); --btn-active-bg: #7a1510; --btn-active-fg: #f7eed5; --panel-bg: #f7eed5; --panel-sep: rgba(122,21,16,0.18); --header-bg: rgba(247,238,213,0.92); --header-border: rgba(122,21,16,0.25); --header-text: #7a1510; --header-btn-bg: rgba(247,238,213,0.6); --header-btn-border: rgba(122,21,16,0.3); --header-btn-text: #2d1b0e; --nav-bg: rgba(247,238,213,0.97); --nav-border: rgba(122,21,16,0.18); --nav-text: #2d1b0e; --nav-muted: #6b5236; --nav-active: #7a1510; --ham-line: #2d1b0e; --ham-border: rgba(122,21,16,0.3); /* SVG tree */ --gK-c1:#a91e1e; --gK-c2:#5a0808; --gQ-c1:#6a1b9a; --gQ-c2:#3a0a55; --gP-c1:#1a3a6b; --gP-c2:#0a1d3a; --gO-c1:#3a3a3a; --gO-c2:#0a0a0a; --gB-c1:#704820; --gB-c2:#4a2f10; --label-color:#7a1510; --letter-color:#f7eed5; --era-color:rgba(45,27,14,0.45); } /* ── Game of Thrones Dark ────────────────────────────────── */ html[data-style="got"][data-mode="dark"] { --dt-bg: #0c0202; --win-bg: rgba(14,4,4,0.97); --win-bt: 1px solid rgba(192,57,43,0.22); --win-bl: 1px solid rgba(192,57,43,0.22); --win-br: 1px solid rgba(50,0,0,0.5); --win-bb: 1px solid rgba(50,0,0,0.5); --win-shadow: 0 4px 24px rgba(0,0,0,0.65); --titlebar: linear-gradient(to right, rgba(6,0,0,0.98), rgba(40,10,5,0.95)); --titlebar-fg: #c9a84c; --text: #e8d5a3; --text-muted: #7a6040; --hover-bg: rgba(192,57,43,0.12); --hover-fg: #e8d5a3; --div-top: rgba(192,57,43,0.15); --div-bot: transparent; --taskbar-bg: rgba(8,0,0,0.97); --taskbar-top: rgba(192,57,43,0.2); --icon-label: rgba(232,213,163,0.92); --icon-shadow: 1px 1px 3px rgba(0,0,0,0.9); --icon-sel: rgba(192,57,43,0.15); --empty-color: #7a6040; --btn-lt: rgba(192,57,43,0.25); --btn-dk: rgba(50,0,0,0.5); --btn-active-bg: rgba(192,57,43,0.18); --btn-active-fg: #c9a84c; --panel-bg: rgba(10,2,2,0.97); --panel-sep: rgba(192,57,43,0.18); --header-bg: rgba(8,0,0,0.97); --header-border: rgba(192,57,43,0.2); --header-text: #c9a84c; --header-btn-bg: rgba(6,0,0,0.88); --header-btn-border: rgba(192,57,43,0.4); --header-btn-text: #c9a84c; --nav-bg: rgba(6,0,0,0.98); --nav-border: rgba(192,57,43,0.18); --nav-text: rgba(232,213,163,0.6); --nav-muted: rgba(122,98,72,0.5); --nav-active: #c0392b; --ham-line: #c9a84c; --ham-border: rgba(192,57,43,0.3); /* SVG tree */ --gK-c1:#c0392b; --gK-c2:#5a0808; --gQ-c1:#8b1a8b; --gQ-c2:#380845; --gP-c1:#1a3a6b; --gP-c2:#060e28; --gO-c1:#201515; --gO-c2:#0a0808; --gB-c1:#3a2808; --gB-c2:#140e00; --label-color:#c9a84c; --letter-color:rgba(255,255,255,0.82); --era-color:rgba(138,112,85,0.32); } /* ── Modern Light (visionOS / Apple-glass) ──────────────── */ html[data-style="modern"][data-mode="light"] { --dt-bg: linear-gradient(135deg, #eff3f8 0%, #f6f8fb 50%, #eaf0f7 100%); --win-bg: rgba(255,255,255,0.55); --win-bt: 1px solid rgba(255,255,255,0.7); --win-bl: 1px solid rgba(255,255,255,0.7); --win-br: 1px solid rgba(255,255,255,0.4); --win-bb: 1px solid rgba(255,255,255,0.4); --win-shadow: 0 8px 32px rgba(20,40,80,0.08), inset 0 1px 0 rgba(255,255,255,0.7); --titlebar: rgba(255,255,255,0.7); --titlebar-fg: #1d1d1f; --text: #1d1d1f; --text-muted: #6e6e73; --hover-bg: rgba(0,0,0,0.04); --hover-fg: #1d1d1f; --div-top: rgba(0,0,0,0.06); --div-bot: transparent; --taskbar-bg: rgba(255,255,255,0.7); --taskbar-top: rgba(255,255,255,0.5); --icon-label: #1d1d1f; --icon-shadow: 0 1px 2px rgba(0,0,0,0.05); --icon-sel: rgba(0,122,255,0.12); --empty-color: #b0b0b8; --btn-lt: rgba(255,255,255,0.6); --btn-dk: rgba(0,0,0,0.06); --btn-active-bg: #007AFF; --btn-active-fg: #ffffff; --panel-bg: rgba(255,255,255,0.6); --panel-sep: rgba(0,0,0,0.06); --header-bg: rgba(255,255,255,0.7); --header-border: rgba(0,0,0,0.06); --header-text: #1d1d1f; --header-btn-bg: rgba(255,255,255,0.5); --header-btn-border: rgba(0,0,0,0.08); --header-btn-text: #1d1d1f; --nav-bg: rgba(255,255,255,0.75); --nav-border: rgba(0,0,0,0.06); --nav-text: #1d1d1f; --nav-muted: #86868b; --nav-active: #007AFF; --ham-line: #1d1d1f; --ham-border: rgba(0,0,0,0.12); /* SVG tree */ --gK-c1:#ff6b6b; --gK-c2:#c53030; --gQ-c1:#5ac8fa; --gQ-c2:#0066cc; --gP-c1:#007AFF; --gP-c2:#0040a8; --gO-c1:#a0a0a8; --gO-c2:#6e6e73; --gB-c1:#a89070; --gB-c2:#6b563f; --label-color:#1d1d1f; --letter-color:rgba(255,255,255,0.95); --era-color:rgba(29,29,31,0.35); } /* ── Modern Dark (visionOS-glass dark) ───────────────────── */ html[data-style="modern"][data-mode="dark"] { --dt-bg: linear-gradient(135deg, #0c1018 0%, #0a0e16 50%, #0e1420 100%); --win-bg: rgba(28,32,42,0.55); --win-bt: 1px solid rgba(255,255,255,0.1); --win-bl: 1px solid rgba(255,255,255,0.1); --win-br: 1px solid rgba(255,255,255,0.04); --win-bb: 1px solid rgba(255,255,255,0.04); --win-shadow: 0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); --titlebar: rgba(28,32,42,0.7); --titlebar-fg: #f5f5f7; --text: #f5f5f7; --text-muted: #98989d; --hover-bg: rgba(255,255,255,0.06); --hover-fg: #f5f5f7; --div-top: rgba(255,255,255,0.08); --div-bot: transparent; --taskbar-bg: rgba(12,16,24,0.7); --taskbar-top: rgba(255,255,255,0.06); --icon-label: #f5f5f7; --icon-shadow: 0 1px 4px rgba(0,0,0,0.7); --icon-sel: rgba(10,132,255,0.18); --empty-color: #56565a; --btn-lt: rgba(255,255,255,0.1); --btn-dk: rgba(0,0,0,0.4); --btn-active-bg: #0A84FF; --btn-active-fg: #ffffff; --panel-bg: rgba(28,32,42,0.6); --panel-sep: rgba(255,255,255,0.08); --header-bg: rgba(12,16,24,0.7); --header-border: rgba(255,255,255,0.08); --header-text: #f5f5f7; --header-btn-bg: rgba(255,255,255,0.06); --header-btn-border: rgba(255,255,255,0.12); --header-btn-text: #f5f5f7; --nav-bg: rgba(12,16,24,0.85); --nav-border: rgba(255,255,255,0.08); --nav-text: #f5f5f7; --nav-muted: #98989d; --nav-active: #0A84FF; --ham-line: #f5f5f7; --ham-border: rgba(255,255,255,0.12); /* SVG tree */ --gK-c1:#ff7e85; --gK-c2:#7a1f25; --gQ-c1:#64d2ff; --gQ-c2:#0a4a78; --gP-c1:#0A84FF; --gP-c2:#0a3a78; --gO-c1:#56565a; --gO-c2:#28282c; --gB-c1:#bfa078; --gB-c2:#6b563f; --label-color:#f5f5f7; --letter-color:rgba(255,255,255,0.92); --era-color:rgba(245,245,247,0.35); } /* ── Brutal Light (Soft cream + sky blue) ─────────────────── */ html[data-style="brutal"][data-mode="light"] { --dt-bg: #f0e8d0; --win-bg: #fbf6e6; --win-bt: 2px solid #1a1a1a; --win-bl: 2px solid #1a1a1a; --win-br: 2px solid #1a1a1a; --win-bb: 2px solid #1a1a1a; --win-shadow: 2px 2px 0 #1a1a1a; --titlebar: #fbf6e6; --titlebar-fg: #1a1a1a; --text: #1a1a1a; --text-muted: #4a4640; --hover-bg: #d8ecef; --hover-fg: #1a1a1a; --div-top: #1a1a1a; --div-bot: transparent; --taskbar-bg: #fbf6e6; --taskbar-top: #1a1a1a; --icon-label: #1a1a1a; --icon-shadow: none; --icon-sel: rgba(127,193,204,0.35); --empty-color: #8a857a; --btn-lt: #1a1a1a; --btn-dk: #1a1a1a; --btn-active-bg: #1a1a1a; --btn-active-fg: #fbf6e6; --panel-bg: #fbf6e6; --panel-sep: #1a1a1a; --header-bg: #fbf6e6; --header-border: #1a1a1a; --header-text: #1a1a1a; --header-btn-bg: #fbf6e6; --header-btn-border: #1a1a1a; --header-btn-text: #1a1a1a; --nav-bg: #fbf6e6; --nav-border: #1a1a1a; --nav-text: #1a1a1a; --nav-muted: #4a4640; --nav-active: #4a9bab; --ham-line: #1a1a1a; --ham-border: #1a1a1a; /* SVG tree */ --gK-c1:#c0392b; --gK-c2:#7a1010; --gQ-c1:#9b59b6; --gQ-c2:#5a2a6a; --gP-c1:#4a9bab; --gP-c2:#1f5b6b; --gO-c1:#3a3a3a; --gO-c2:#0a0a0a; --gB-c1:#8b5a2b; --gB-c2:#4a2f10; --label-color:#1a1a1a; --letter-color:#fbf6e6; --era-color:rgba(26,26,26,0.4); } /* ── Brutal Dark (Warm cocoa + sky blue) ──────────────────── */ html[data-style="brutal"][data-mode="dark"] { --dt-bg: #1c1814; --win-bg: #28231d; --win-bt: 2px solid #fbf6e6; --win-bl: 2px solid #fbf6e6; --win-br: 2px solid #fbf6e6; --win-bb: 2px solid #fbf6e6; --win-shadow: 2px 2px 0 #fbf6e6; --titlebar: #28231d; --titlebar-fg: #fbf6e6; --text: #fbf6e6; --text-muted: #a8a08c; --hover-bg: rgba(127,193,204,0.18); --hover-fg: #fbf6e6; --div-top: #fbf6e6; --div-bot: transparent; --taskbar-bg: #28231d; --taskbar-top: #fbf6e6; --icon-label: #fbf6e6; --icon-shadow: 1px 1px 0 #1a1a1a; --icon-sel: rgba(127,193,204,0.25); --empty-color: #6a635a; --btn-lt: #fbf6e6; --btn-dk: #fbf6e6; --btn-active-bg: #fbf6e6; --btn-active-fg: #28231d; --panel-bg: #28231d; --panel-sep: #fbf6e6; --header-bg: #1c1814; --header-border: #fbf6e6; --header-text: #fbf6e6; --header-btn-bg: #28231d; --header-btn-border: #fbf6e6; --header-btn-text: #fbf6e6; --nav-bg: #1c1814; --nav-border: #fbf6e6; --nav-text: #fbf6e6; --nav-muted: #a8a08c; --nav-active: #7fc1cc; --ham-line: #fbf6e6; --ham-border: #fbf6e6; /* SVG tree */ --gK-c1:#e06c5c; --gK-c2:#7a1f15; --gQ-c1:#c97bff; --gQ-c2:#5a2a6a; --gP-c1:#7fc1cc; --gP-c2:#1f5b6b; --gO-c1:#5a5650; --gO-c2:#1a1815; --gB-c1:#d9a066; --gB-c2:#6b4423; --label-color:#fbf6e6; --letter-color:#1a1a1a; --era-color:rgba(251,246,230,0.45); } /* ── Term Light (Cream / typewriter) ──────────────────────── */ html[data-style="term"][data-mode="light"] { --dt-bg: #efe8d6; --win-bg: #f5efde; --win-bt: 1px solid #000000; --win-bl: 1px solid #000000; --win-br: 1px solid #000000; --win-bb: 1px solid #000000; --titlebar: #000000; --titlebar-fg: #efe8d6; --text: #000000; --text-muted: #4a4640; --hover-bg: rgba(0,0,0,0.07); --hover-fg: #000000; --div-top: #000000; --div-bot: transparent; --taskbar-bg: #efe8d6; --taskbar-top: #000000; --icon-label: #000000; --icon-shadow: none; --icon-sel: rgba(0,0,0,0.08); --empty-color: #8a857a; --btn-lt: #000000; --btn-dk: #000000; --btn-active-bg: #000000; --btn-active-fg: #efe8d6; --panel-bg: #f5efde; --panel-sep: #000000; --header-bg: #efe8d6; --header-border: #000000; --header-text: #000000; --header-btn-bg: #f5efde; --header-btn-border: #000000; --header-btn-text: #000000; --nav-bg: #efe8d6; --nav-border: #000000; --nav-text: #000000; --nav-muted: #4a4640; --nav-active: #000000; --ham-line: #000000; --ham-border: #000000; /* SVG tree */ --gK-c1:#c0392b; --gK-c2:#6b1010; --gQ-c1:#6a1b9a; --gQ-c2:#3a0a55; --gP-c1:#1a3a6b; --gP-c2:#0a1d3a; --gO-c1:#3a3a3a; --gO-c2:#0a0a0a; --gB-c1:#8b5a2b; --gB-c2:#4a2f10; --label-color:#000000; --letter-color:#efe8d6; --era-color:rgba(0,0,0,0.45); } /* ── Term Dark (High-contrast terminal) ───────────────────── */ html[data-style="term"][data-mode="dark"] { --dt-bg: #000000; --win-bg: #0a0a0a; --win-bt: 1px solid #efe8d6; --win-bl: 1px solid #efe8d6; --win-br: 1px solid #efe8d6; --win-bb: 1px solid #efe8d6; --titlebar: #efe8d6; --titlebar-fg: #000000; --text: #efe8d6; --text-muted: #8a857a; --hover-bg: rgba(239,232,214,0.1); --hover-fg: #efe8d6; --div-top: #efe8d6; --div-bot: transparent; --taskbar-bg: #0a0a0a; --taskbar-top: #efe8d6; --icon-label: #efe8d6; --icon-shadow: none; --icon-sel: rgba(239,232,214,0.12); --empty-color: #5a5650; --btn-lt: #efe8d6; --btn-dk: #efe8d6; --btn-active-bg: #efe8d6; --btn-active-fg: #000000; --panel-bg: #0a0a0a; --panel-sep: #efe8d6; --header-bg: #000000; --header-border: #efe8d6; --header-text: #efe8d6; --header-btn-bg: #0a0a0a; --header-btn-border: #efe8d6; --header-btn-text: #efe8d6; --nav-bg: #000000; --nav-border: #efe8d6; --nav-text: #efe8d6; --nav-muted: #8a857a; --nav-active: #efe8d6; --ham-line: #efe8d6; --ham-border: #efe8d6; /* SVG tree */ --gK-c1:#ff6b6b; --gK-c2:#7a1a1a; --gQ-c1:#c97bff; --gQ-c2:#5a1f7a; --gP-c1:#6db4ff; --gP-c2:#1a3a6b; --gO-c1:#5a5650; --gO-c2:#1a1815; --gB-c1:#d9a066; --gB-c2:#6b4423; --label-color:#efe8d6; --letter-color:#000000; --era-color:rgba(239,232,214,0.45); }