/* * Change the active theme by editing data-theme on the element. * Keep theme definitions limited to design tokens so the layout stays simple. */ :root, [data-theme="ocean-blue"] { color-scheme: light; --ink: #102a56; --muted: #526f98; --accent: #2563eb; --accent-strong: #1748b5; --page-base: #eaf3ff; --content-base: #eaf3ff; --page-start: #f8fbff; --page-middle: #cfe5ff; --page-end: #70aef8; --glow: rgba(96, 165, 250, 0.48); --surface: rgba(255, 255, 255, 0.8); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(255, 255, 255, 0.82); --shadow: 0 18px 50px rgba(30, 64, 175, 0.14); --shadow-strong: 0 22px 60px rgba(30, 64, 175, 0.23); --accent-gradient: linear-gradient(120deg, #1748b5, #2878e8); --accent-gradient-hover: linear-gradient(120deg, #123b99, #1d64d2); --image-placeholder: #d9eaff; --symbol-gradient: linear-gradient(145deg, #edf6ff, #bedaff); --footer: rgba(16, 42, 86, 0.65); } [data-theme="sky"] { --ink: #15324b; --muted: #58758e; --accent: #0284c7; --accent-strong: #0369a1; --page-base: #eefaff; --content-base: #eefaff; --page-start: #ffffff; --page-middle: #d7f1ff; --page-end: #8bd7f7; --glow: rgba(125, 211, 252, 0.48); --shadow: 0 18px 50px rgba(3, 105, 161, 0.12); --shadow-strong: 0 22px 60px rgba(3, 105, 161, 0.21); --accent-gradient: linear-gradient(120deg, #0369a1, #0ea5e9); --accent-gradient-hover: linear-gradient(120deg, #075985, #0284c7); --image-placeholder: #dff4ff; --symbol-gradient: linear-gradient(145deg, #f0faff, #c5ebff); --footer: rgba(21, 50, 75, 0.65); } [data-theme="deep-water"] { color-scheme: dark; --ink: #ffffff; --muted: #dcd3ff; --accent: #a185da; --accent-strong: #c9b8f3; --page-base: #0a0f2a; --content-base: #020064; --page-start: #300060; --page-middle: #6a00a8; --page-end: #b300b3; --glow: rgba(161, 133, 218, 0.24); --surface: rgba(10, 15, 42, 0.72); --surface-strong: rgba(14, 27, 62, 0.92); --border: rgba(220, 211, 255, 0.22); --shadow: 0 18px 50px rgba(15, 7, 40, 0.3); --shadow-strong: 0 25px 60px rgba(15, 7, 40, 0.45); --accent-gradient: linear-gradient(120deg, #2c0b74, #6a00a8); --accent-gradient-hover: linear-gradient(120deg, #3a1094, #8300c7); --image-placeholder: #17114b; --symbol-gradient: linear-gradient(145deg, #211858, #0a0f2a); --footer: rgba(220, 211, 255, 0.72); }