/* Dark theme: near-black navy under the icon's deep blue, with its cyan for accents.
   Don't forget to update the theme colors in scripts/dark-mode.js and index.html's
   theme-color metas if --bg changes. */

:root {
    color-scheme: dark;

    --bg: #060d1e;
    --fg: #edf5ff;
    --secondary: #a6b6cf;
    /* The icon's cyan, 12.2:1 on --bg. */
    --accent: #2ae0fd;
    --accent-text: #5be6fd;
    --on-accent: #060d1e;
    --danger: #ff9a8f;
    --warn: #f5c26b;
    --title-gradient: linear-gradient(100deg, #d4f6ff 5%, #2ae0fd 50%, #2f9bff 95%);
    --glass: rgba(255, 255, 255, .05);
    --glass-strong: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .12);
    /* At least 3:1 on the panels, so fields can be told apart from them. */
    --field-border: rgba(237, 245, 255, .42);
    --glass-shadow: rgba(0, 0, 0, .45);
    --icon-shadow: rgba(0, 0, 0, .5);
    --divider: rgba(237, 245, 255, .14);
    --track: rgba(237, 245, 255, .18);
    --accent-glow: rgba(42, 224, 253, .28);
    --scrim: rgba(6, 13, 30, .8);
}

html {
    background: var(--bg);
}

.theme-toggle .icon-sun {
    display: block;
}

/* The icon's deep blue washing down from the top, with its cyan to one side. */
.hero-sky {
    background:
        radial-gradient(ellipse 1100px 560px at 50% 0%, rgba(1, 68, 214, .5) 0%, rgba(1, 68, 214, .2) 50%, rgba(1, 68, 214, 0) 100%),
        radial-gradient(ellipse 700px 420px at 82% 18%, rgba(14, 207, 253, .14) 0%, rgba(14, 207, 253, 0) 70%);
}