/* Light theme: morning coffee, a cream counter under a latte glow.
   Don't forget to update the theme colors in scripts/dark-mode.js if --bg changes. */

:root {
    color-scheme: light;

    /* A paler tint of the icon's cream cup, #f1e3d0. */
    --bg: #fbf6ef;
    --fg: #2b1e14;
    /* 6.3:1 on --bg, 4.6:1 at the glow's strongest point. */
    --secondary: #6b5849;
    /* AccentColor, the icon's coffee fill. */
    --accent: #956b47;
    /* 4.7:1 on --accent. */
    --on-accent: #ffffff;
    /* The coffee line in the icon's cup, 6.4:1 on --bg and 4.7:1 on the glow. */
    --accent-text: #785238;
    --hairline: rgba(43, 30, 20, .12);
    --surface: #ffffff;
    --chip-bg: var(--accent);
    --chip-fg: var(--on-accent);
    /* Behind the logo, at least 3:1 with its main blues, #0057d5 and #0186fb.
       Matches af.codes. */
    --logo-circle: #ffffff;
    --glass: rgba(255, 255, 255, .55);
    --glass-border: rgba(43, 30, 20, .1);
    --glass-shadow: rgba(90, 59, 35, .18);
    --icon-shadow: rgba(90, 59, 35, .22);
    --media-shadow: rgba(90, 59, 35, .3);
    --popover-rim-shadow: rgba(43, 30, 20, .18);
    --steam: rgba(149, 107, 71, .14);
    /* Deep coffee through AccentColor; the lightest stop holds 3.5:1 at the
       glow's strongest point. */
    --title-gradient: linear-gradient(100deg, #5a3b23 5%, #785238 50%, #8f6440 95%);
}

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

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

/* A latte wash from the top, and a warmer coffee haze to the right. */
.hero-sky {
    background:
        radial-gradient(ellipse 1100px 520px at 50% 0%, rgba(217, 180, 140, .55) 0%, rgba(217, 180, 140, 0) 100%),
        radial-gradient(ellipse 700px 420px at 82% 18%, rgba(149, 107, 71, .18) 0%, rgba(149, 107, 71, 0) 100%);
}