/* ========================================================================= Family Hub — global theme system Design tokens exposed as CSS variables so every page can be reskinned by flipping . Keep the id list in sync with tools/prefs.py THEMES. ========================================================================= */ :root, html[data-theme="light"] { --bg: #f2f2f7; --bg-grad: #f2f2f7; --surface: #ffffff; --surface-2: #fafafa; --text: #1c1c1e; --muted: #8e8e93; --border: #e5e5ea; --accent: #007aff; --accent-2: #0062d4; --accent-text: #ffffff; --header-bg: #ffffff; --shadow: 0 1px 4px rgba(0,0,0,.07); --shadow-lg: 0 4px 24px rgba(0,0,0,.10); --card-radius: 16px; --btn-radius: 10px; --glow: none; color-scheme: light; } html[data-theme="dark"] { --bg: #000000; --bg-grad: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --text: #f2f2f7; --muted: #8e8e93; --border: #38383a; --accent: #0a84ff; --accent-2: #0060df; --accent-text: #ffffff; --header-bg: #1c1c1e; --shadow: 0 1px 4px rgba(0,0,0,.5); --shadow-lg: 0 6px 28px rgba(0,0,0,.6); --card-radius: 16px; --btn-radius: 10px; --glow: none; color-scheme: dark; } /* Pure white — flat, square, hairline buttons, no shadows */ html[data-theme="pure"] { --bg: #ffffff; --bg-grad: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --text: #111111; --muted: #666666; --border: #111111; --accent: #111111; --accent-2: #000000; --accent-text: #ffffff; --header-bg: #ffffff; --shadow: none; --shadow-lg: none; --card-radius: 4px; --btn-radius: 4px; --glow: none; color-scheme: light; } /* Futuristic — deep space navy, neon cyan/magenta glow */ html[data-theme="futuristic"] { --bg: #070b18; --bg-grad: radial-gradient(1200px 600px at 12% -10%, rgba(0,229,255,.14), transparent 60%), radial-gradient(1000px 500px at 100% 0%, rgba(255,61,240,.12), transparent 55%), #070b18; --surface: rgba(14,22,48,.85); --surface-2: #132043; --text: #e6f7ff; --muted: #7aa0c4; --border: #1d2c52; --accent: #00e5ff; --accent-2: #ff3df0; --accent-text: #04121f; --header-bg: rgba(10,16,36,.82); --shadow: 0 0 0 1px rgba(0,229,255,.14), 0 8px 30px rgba(0,0,0,.5); --shadow-lg: 0 0 0 1px rgba(0,229,255,.2), 0 12px 40px rgba(0,0,0,.6); --card-radius: 14px; --btn-radius: 10px; --glow: 0 0 18px rgba(0,229,255,.45); color-scheme: dark; } /* Midnight — soft indigo dark */ html[data-theme="midnight"] { --bg: #0b1020; --bg-grad: linear-gradient(160deg, #0b1020 0%, #10162c 100%); --surface: #141b33; --surface-2: #1c2547; --text: #dfe6ff; --muted: #8a96c0; --border: #26315a; --accent: #6c8cff; --accent-2: #9b6cff; --accent-text: #ffffff; --header-bg: #141b33; --shadow: 0 2px 10px rgba(0,0,0,.4); --shadow-lg: 0 8px 30px rgba(0,0,0,.5); --card-radius: 16px; --btn-radius: 12px; --glow: none; color-scheme: dark; } /* Sunset — warm plum + coral */ html[data-theme="sunset"] { --bg: #2a1220; --bg-grad: linear-gradient(160deg, #2a1220 0%, #3a1c17 100%); --surface: #3d1a2b; --surface-2: #4a2233; --text: #ffe9de; --muted: #d9a08f; --border: #5b2c3f; --accent: #ff7a59; --accent-2: #ffb347; --accent-text: #2a1220; --header-bg: #3d1a2b; --shadow: 0 2px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 30px rgba(0,0,0,.45); --card-radius: 16px; --btn-radius: 12px; --glow: 0 0 16px rgba(255,122,89,.35); color-scheme: dark; } /* Forest — deep green */ html[data-theme="forest"] { --bg: #0e1a12; --bg-grad: linear-gradient(160deg, #0e1a12 0%, #12241a 100%); --surface: #16281c; --surface-2: #1d3325; --text: #e4f6e9; --muted: #8fb79b; --border: #244a30; --accent: #41d18a; --accent-2: #8fe36b; --accent-text: #08160d; --header-bg: #16281c; --shadow: 0 2px 10px rgba(0,0,0,.4); --shadow-lg: 0 8px 30px rgba(0,0,0,.5); --card-radius: 16px; --btn-radius: 12px; --glow: none; color-scheme: dark; } /* Mono — high-contrast greyscale */ html[data-theme="mono"] { --bg: #151515; --bg-grad: #151515; --surface: #242424; --surface-2: #2f2f2f; --text: #f0f0f0; --muted: #9a9a9a; --border: #3a3a3a; --accent: #e0e0e0; --accent-2: #bfbfbf; --accent-text: #151515; --header-bg: #242424; --shadow: 0 2px 10px rgba(0,0,0,.5); --shadow-lg: 0 8px 30px rgba(0,0,0,.6); --card-radius: 8px; --btn-radius: 6px; --glow: none; color-scheme: dark; } /* ========================================================================= Site-wide override layer The individual tool pages ship their own inline