/* CloudHome shared theme tokens — used by both login.html and index.html. Pick a theme by setting data-theme on to: cloud (default), classic, sunset, meadow, midnight. */ :root{ /* ---- Cloud (default) ---- */ --cream:#e7f4ff; --paper:#ffffff; --ink:#33415a; --muted:#889bb0; --line:#e5f0fb; --sky-1:#eaf8ff; --sky-2:#c3ecfb; --sky-3:#7fd6f2; --sky-4:#3fabdb; --sky-5:#1f7fae; --lilac-1:#f3efff; --lilac-2:#dccdff; --lilac-3:#ab8ff5; --lilac-4:#7c5ce0; --wave-1:#bdeeff; --wave-2:#8fe0f5; --water-mid:var(--sky-4); --water-deep:var(--sky-5); --shadow-1:0 16px 34px -16px rgba(51,65,90,.35); --shadow-card:0 26px 55px -22px rgba(63,141,190,.35); --panel-radius:32px; --tank-radius:120px 120px 44px 44px; --clay-border:6px; --clay-ring:0 0 0 6px var(--sky-2); --clay-ring-b:0 0 0 5px var(--lilac-1); --btn-lift:0 6px 0 var(--sky-5); --btn-lift-active:0 2px 0 var(--sky-5); /* ---- semantic (constant across themes) ---- */ --coral-1:#fff0ee; --coral-2:#ffc3bd; --coral-3:#ff8f85; --coral-4:#e85c50; --mint-1:#e9fbf2; --mint-2:#9beecb; --mint-3:#33b985; --mint-4:#1f8c63; --amber-1:#fff6e3; --amber-2:#ffd888; --amber-3:#e7952f; color-scheme:light; } :root[data-theme="classic"]{ /* ---- Classic Sky: candy pastel homage — blush page, blue water, pink camera ---- */ --cream:#fff5fa; --paper:#ffffff; --ink:#4a3a4e; --muted:#8a7086; --line:#ffe1ee; --sky-1:#eaf6fc; --sky-2:#bfe6f5; --sky-3:#74c9ef; --sky-4:#4fa9d9; --sky-5:#397fae; --lilac-1:#fdeef5; --lilac-2:#ffd0e3; --lilac-3:#ff9fbd; --lilac-4:#e8749b; --wave-1:#d7f0fb; --wave-2:#a9d9ee; } :root[data-theme="sunset"]{ /* ---- Sunset: warm, cozy, golden-hour clay ---- */ --cream:#fff3e8; --paper:#fffaf5; --ink:#4a352c; --muted:#a8887c; --line:#ffe4cf; --sky-1:#fff1e3; --sky-2:#ffd7ad; --sky-3:#ffab6b; --sky-4:#ff8c42; --sky-5:#d95f1c; --lilac-1:#ffeef0; --lilac-2:#ffc9c9; --lilac-3:#ff7f7f; --lilac-4:#dd5a5a; --wave-1:#ffe2bd; --wave-2:#ffb37a; } :root[data-theme="meadow"]{ /* ---- Meadow: fresh, light mint-green (kept pale so the water never reads as algae) ---- */ --cream:#f6fbf1; --paper:#ffffff; --ink:#2c3d2a; --muted:#84a078; --line:#e8f4de; --sky-1:#f4fbee; --sky-2:#ddf3c9; --sky-3:#bfe8a3; --sky-4:#8fce6e; --sky-5:#5fa84a; --lilac-1:#fff9e3; --lilac-2:#ffe8a3; --lilac-3:#ffc44d; --lilac-4:#dd9c28; --wave-1:#f2faea; --wave-2:#dcf0c4; --water-mid:#cdeeb0; --water-deep:#addc86; } :root[data-theme="midnight"]{ /* ---- Midnight: glowing dark night mode ---- */ --cream:#11162a; --paper:#1b2140; --ink:#eef1ff; --muted:#8b93c4; --line:#2a3160; --sky-1:#1b2650; --sky-2:#2c3f7a; --sky-3:#4f7fe0; --sky-4:#6fa0ff; --sky-5:#a9c4ff; --lilac-1:#241a45; --lilac-2:#3d2b73; --lilac-3:#9b7bff; --lilac-4:#c3aeff; --wave-1:#3a5aa8; --wave-2:#4f7fe0; --shadow-1:0 16px 34px -16px rgba(0,0,0,.65); --shadow-card:0 26px 60px -20px rgba(0,0,0,.6); --panel-radius:30px; --tank-radius:120px 120px 44px 44px; --clay-border:6px; --clay-ring:0 0 0 6px var(--sky-2),0 0 22px -6px var(--sky-4); --clay-ring-b:0 0 0 5px var(--lilac-1),0 0 18px -6px var(--lilac-3); --btn-lift:0 6px 0 var(--sky-5),0 0 16px -2px var(--sky-4); --btn-lift-active:0 2px 0 var(--sky-5); color-scheme:dark; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--cream);font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;color:var(--ink);position:relative;overflow-x:hidden} button{font:inherit;border:0;cursor:pointer;color:inherit} h1,h2,.title,.brand{font-family:"Fredoka","Trebuchet MS",sans-serif} :focus-visible{outline:3px solid var(--sky-4);outline-offset:2px;border-radius:8px}