:root {
    /* Colors. The page itself is Bloom's pale blue and cards are white on it; the sky blue of
       the app icon is decorative. Interactive colour is split in two: `--color-accent` for
       text links, and `--color-button` for filled buttons, chosen so a white label clears
       4.5:1 (#0072e0 on white is 4.7:1, where the sky blue manages only 2.5:1). */
    --color-bg: #e5ebfb;
    /* The slate the hero photo's shadows fall into. The hero dissolves into it and the Meet Bud
       section sits on it in both colour schemes, so the two read as one dark block. */
    --color-bg-dark: #212838;
    --color-surface: #ffffff;
    --color-border: #cdd3e2;
    --color-text: #0b1021;
    --color-text-secondary: rgba(11, 16, 33, 0.62);
    --color-text-tertiary: rgba(11, 16, 33, 0.42);
    --color-brand: #42aef2;
    --color-accent: #0072e0;
    --color-accent-hover: #005fc0;
    --color-button: #0072e0;
    --color-button-hover: #005fc0;
    --color-button-contrast: #ffffff;
    --color-nav-bg: rgba(255, 255, 255, 0.74);
    --color-nav-bg-solid: #f4f6fb;
    --color-glow: rgba(66, 174, 242, 0.18);

    /* Edge colours of the feature photos, sampled from the band each crop actually shows and
       darkened to sit under the copy scrim (x0.7 here, x0.6 on phones where the copy sits
       directly on them). The screenshots between two photos sit on a gradient from the upper
       photo's bottom colour to the lower photo's top colour, so neither edge shows a seam. */
    --photo-health-bottom: #6c6661;
    --photo-food-top: #786558;
    --photo-food-bottom: #4c4747;
    --photo-sleep-top: #2c3334;
    --photo-sleep-bottom: #3c4a4e;
    --photo-workout-top: #5e524c;
    --photo-workout-bottom: #77554e;

    /* Single-colour icons are drawn dark and flipped for dark mode. */
    --icon-filter: none;

    /* Typography */
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Layout */
    --max-width: 1120px;
    --max-width-narrow: 760px;
    --nav-height: 60px;
    --nav-offset: 14px;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 999px;

    /* Effects */
    --shadow-card: 0 4px 24px rgba(11, 16, 33, 0.06);
    --shadow-float: 0 10px 40px -10px rgba(11, 16, 33, 0.25);
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --blur-nav: saturate(180%) blur(24px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0e1424;
        --color-surface: #182036;
        --color-border: rgba(255, 255, 255, 0.12);
        --color-text: #f3f5fb;
        --color-text-secondary: rgba(243, 245, 251, 0.66);
        --color-text-tertiary: rgba(243, 245, 251, 0.44);
        --color-accent: #5cb8ff;
        --color-accent-hover: #86caff;
        /* White on #0f74da is 4.65:1; the brighter hover reads as lit rather than pressed. */
        --color-button: #0f74da;
        --color-button-hover: #2b8af0;
        --color-nav-bg: rgba(24, 32, 54, 0.72);
        --color-nav-bg-solid: #182036;
        --color-glow: rgba(66, 174, 242, 0.14);


        --icon-filter: invert(1);

        --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
        --shadow-float: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
    }
}

@media (max-width: 700px) {
    :root {
        --photo-health-bottom: #6b6664;
        --photo-food-top: #644f42;
        --photo-food-bottom: #3e2e2c;
        --photo-sleep-top: #3f4a4d;
        --photo-sleep-bottom: #1d2525;
        --photo-workout-top: #5b5b5a;
        --photo-workout-bottom: #714a42;
    }
}