/*
  SafeTrace design tokens. Every color/spacing/type decision in the site's CSS should reference
  one of these custom properties rather than a hardcoded value, so the whole look can be tuned
  from one file. Calm, trustworthy, non-alarmist: red is reserved for genuinely active-alert
  status, never used decoratively.
*/
:root {
    /* Color: neutral-first, navy/teal as the primary trust palette, red reserved for active alerts.
       Three distinct light neutrals: --st-color-bg is the overall page background, --st-color-surface
       is a very slightly warmer/cooler "alternate section" tone used to break up long pages, and
       --st-color-surface-raised is pure white, reserved for cards so they lift off the page. */
    --st-color-bg: #f5f8fb;
    --st-color-surface: #fafbfc;
    --st-color-surface-raised: #ffffff;
    --st-color-border: #dce5ec;
    --st-color-text: #17212b;
    --st-color-text-muted: #5f6b76;
    --st-color-text-inverse: #ffffff;

    --st-color-primary: #16324f;
    --st-color-primary-hover: #1c3f63;
    --st-color-accent: #159a8c;
    --st-color-accent-hover: #127a70;
    --st-color-link: #0b63ce;
    --st-color-link-hover: #094fa3;

    --st-color-alert-active-bg: #fdecea;
    --st-color-alert-active-border: #b42318;
    --st-color-alert-active-text: #7a241f;

    --st-color-status-investigation-bg: #fff7e6;
    --st-color-status-investigation-border: #d9a406;
    --st-color-status-investigation-text: #6b4f04;

    --st-color-status-resolved-bg: #eaf7f3;
    --st-color-status-resolved-border: #159a8c;
    --st-color-status-resolved-text: #0f5f56;

    --st-color-provisional-bg: #eaf1fb;
    --st-color-provisional-border: #8bb4dd;
    --st-color-provisional-text: #234a70;

    --st-color-success-bg: #eaf7f3;
    --st-color-warning-bg: #fff7e6;
    --st-color-critical: #b42318;

    /* Content-based card tints -- almost imperceptible against white, just enough for a reader to
       subconsciously distinguish a recall card from an outbreak card from an educational one
       while scanning a mixed list, without relying on strong color or heavy borders. */
    --st-color-card-recall: #fffdfc;
    --st-color-card-outbreak: #f9fbff;

    --st-color-focus-ring: #1a73c7;

    /* Hero gradient -- navy into teal, same family as the primary/accent palette and the logo,
       stretched into a soft two-stop gradient instead of a flat fill. Never used behind data. */
    --st-gradient-hero: linear-gradient(135deg, #16324f 0%, #1a4a63 55%, #159a8c 100%);
    --st-color-hero-text: #ffffff;
    --st-color-hero-text-muted: #d6e6ea;

    /* Motion: one shared, restrained timing so every hover/entrance transition feels consistent. */
    --st-transition-fast: 150ms ease;
    --st-transition-base: 220ms ease;

    /* Typography scale (rem, 16px base) */
    --st-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --st-font-size-xs: 0.75rem;
    --st-font-size-sm: 0.875rem;
    --st-font-size-base: 1rem;
    --st-font-size-lg: 1.125rem;
    --st-font-size-xl: 1.375rem;
    --st-font-size-2xl: 1.75rem;
    --st-font-size-3xl: 2.25rem;
    /* Section headings (~32px) and the hero title (~48-56px, fluid) -- the only two sizes above
       the base scale, kept separate so ordinary page <h1>/<h2> elements are unaffected. */
    --st-font-size-section: 2rem;
    --st-font-size-hero: clamp(2.25rem, 5vw + 1rem, 3.625rem);
    /* Compact secondary card lines (e.g. a recall's Brand line) -- smaller than body,
       larger than the xs/sm scale used for labels/badges. */
    --st-font-size-meta: 0.9375rem;
    --st-line-height-tight: 1.25;
    --st-line-height-base: 1.5;
    --st-line-height-relaxed: 1.65;

    /* Spacing scale (rem) */
    --st-space-1: 0.25rem;
    --st-space-2: 0.5rem;
    --st-space-3: 0.75rem;
    --st-space-4: 1rem;
    --st-space-5: 1.5rem;
    --st-space-6: 2rem;
    --st-space-8: 3rem;
    --st-space-10: 4rem;
    /* Section rhythm (64-96px) -- only used for spacing between major homepage sections */
    --st-space-12: 5rem;
    --st-space-16: 6rem;

    /* Radius */
    --st-radius-sm: 4px;
    --st-radius-md: 8px;
    --st-radius-lg: 12px;
    --st-radius-pill: 999px;

    /* Elevation */
    --st-shadow-card: 0 1px 3px rgba(23, 33, 43, 0.06), 0 1px 2px rgba(23, 33, 43, 0.04);
    --st-shadow-card-hover: 0 8px 20px rgba(23, 33, 43, 0.10), 0 2px 6px rgba(23, 33, 43, 0.06);
    --st-shadow-raised: 0 2px 8px rgba(23, 33, 43, 0.08);

    /* Button glow -- a soft ambient halo in each button's own theme color (teal for
       primary/accent, navy for secondary), brightening on hover/focus. Two-layer (tight + wide
       blur) so it reads as a glow, not just a drop shadow. */
    --st-shadow-glow-accent: 0 0 8px rgba(21, 154, 140, 0.35), 0 0 18px rgba(21, 154, 140, 0.2);
    --st-shadow-glow-accent-strong: 0 0 14px rgba(21, 154, 140, 0.6), 0 0 30px rgba(21, 154, 140, 0.4);
    --st-shadow-glow-primary: 0 0 8px rgba(22, 50, 79, 0.3), 0 0 18px rgba(22, 50, 79, 0.16);
    --st-shadow-glow-primary-strong: 0 0 14px rgba(22, 50, 79, 0.5), 0 0 30px rgba(22, 50, 79, 0.3);

    /* Icon glow -- drop-shadow (not box-shadow), since the hero icon is a non-rectangular shield
       shape with real transparency around it; box-shadow would glow the image's rectangular
       bounding box instead of tracing the actual visible silhouette. */
    --st-glow-icon-accent: drop-shadow(0 0 12px rgba(21, 154, 140, 0.55)) drop-shadow(0 0 26px rgba(21, 154, 140, 0.3));
    --st-glow-icon-accent-strong: drop-shadow(0 0 18px rgba(21, 154, 140, 0.8)) drop-shadow(0 0 36px rgba(21, 154, 140, 0.45));

    /* AQI category colors (AqiCategoryBadge) -- the 6 EPA categories, re-tinted to this site's own
       soft-background/saturated-accent/dark-text recipe (the same shape as
       --st-color-alert-active-*/--st-color-status-investigation-* above) instead of AirNow.gov's
       raw saturated hex. Good/Moderate/Unhealthy also get a glow (paired --st-shadow-glow-aqi-*),
       matching the site's own button treatment; Unhealthy for Sensitive Groups/Very
       Unhealthy/Hazardous stay solid on purpose -- rising severity should read as more serious,
       never prettier. Unhealthy deliberately reuses the site's own alert-active hue family, since
       that's a genuinely alert-worthy condition by this site's own "red reserved for active alerts"
       rule above. */
    --st-color-aqi-good-bg: #e6f6ec;
    --st-color-aqi-good-border: #2f9e5b;
    --st-color-aqi-good-text: #1c6b3f;
    --st-shadow-glow-aqi-good: 0 0 8px rgba(47, 158, 91, 0.3), 0 0 18px rgba(47, 158, 91, 0.16);

    --st-color-aqi-moderate-bg: #fdf3d0;
    --st-color-aqi-moderate-border: #c9971a;
    --st-color-aqi-moderate-text: #6b4f04;
    --st-shadow-glow-aqi-moderate: 0 0 8px rgba(201, 151, 26, 0.3), 0 0 18px rgba(201, 151, 26, 0.16);

    --st-color-aqi-usg-bg: #fbe3d0;
    --st-color-aqi-usg-border: #d9720f;
    --st-color-aqi-usg-text: #7a3c0a;

    --st-color-aqi-unhealthy-bg: #fdecea;
    --st-color-aqi-unhealthy-border: #b42318;
    --st-color-aqi-unhealthy-text: #7a241f;
    --st-shadow-glow-aqi-unhealthy: 0 0 8px rgba(180, 35, 24, 0.3), 0 0 18px rgba(180, 35, 24, 0.16);

    --st-color-aqi-very-unhealthy-bg: #8f3f97;
    --st-color-aqi-very-unhealthy-text: #ffffff;

    --st-color-aqi-hazardous-bg: #7e0023;
    --st-color-aqi-hazardous-text: #ffffff;

    --st-color-aqi-unknown-bg: var(--st-color-surface);
    --st-color-aqi-unknown-border: var(--st-color-border);
    --st-color-aqi-unknown-text: var(--st-color-text-muted);

    /* Breakpoints (referenced in comments -- CSS custom properties can't be used inside @media) */
    /* mobile: 0-599px, tablet: 600-959px, desktop: 960px+ */

    /* Focus */
    --st-focus-ring-width: 3px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --st-color-bg: #10161c;
        --st-color-surface: #171f26;
        --st-color-surface-raised: #1d2731;
        --st-color-border: #2c3742;
        --st-color-text: #e7edf1;
        --st-color-text-muted: #a6b3bc;
        --st-color-text-inverse: #10161c;

        --st-color-primary: #4d7aa8;
        --st-color-primary-hover: #6091bd;
        --st-color-accent: #2bb3a3;
        --st-color-accent-hover: #3fc4b4;
        --st-color-link: #6fb3ef;
        --st-color-link-hover: #9bccf5;

        --st-gradient-hero: linear-gradient(135deg, #16324f 0%, #1a4a63 55%, #159a8c 100%);
        --st-color-hero-text-muted: #cfe3e6;

        --st-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
        --st-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);

        /* Brighter source colors against a dark ground (#2bb3a3/#4d7aa8, the dark-theme
           accent/primary above) so the glow still reads instead of disappearing into the background. */
        --st-shadow-glow-accent: 0 0 8px rgba(43, 179, 163, 0.45), 0 0 18px rgba(43, 179, 163, 0.28);
        --st-shadow-glow-accent-strong: 0 0 16px rgba(43, 179, 163, 0.75), 0 0 34px rgba(43, 179, 163, 0.5);
        --st-shadow-glow-primary: 0 0 8px rgba(77, 122, 168, 0.4), 0 0 18px rgba(77, 122, 168, 0.24);
        --st-shadow-glow-primary-strong: 0 0 16px rgba(77, 122, 168, 0.7), 0 0 34px rgba(77, 122, 168, 0.45);

        --st-glow-icon-accent: drop-shadow(0 0 12px rgba(43, 179, 163, 0.65)) drop-shadow(0 0 26px rgba(43, 179, 163, 0.4));
        --st-glow-icon-accent-strong: drop-shadow(0 0 18px rgba(43, 179, 163, 0.9)) drop-shadow(0 0 36px rgba(43, 179, 163, 0.55));

        --st-color-card-recall: #211e1c;
        --st-color-card-outbreak: #1a1f2b;

        /* AQI category colors, dark ground -- same recipe as --st-shadow-glow-accent above:
           brighter source hue against a dark tinted surface so the glow still reads. */
        --st-color-aqi-good-bg: #16261c;
        --st-color-aqi-good-border: #46c37c;
        --st-color-aqi-good-text: #a8e6bf;
        --st-shadow-glow-aqi-good: 0 0 8px rgba(70, 195, 124, 0.4), 0 0 18px rgba(70, 195, 124, 0.24);

        --st-color-aqi-moderate-bg: #2b2410;
        --st-color-aqi-moderate-border: #e8bb3a;
        --st-color-aqi-moderate-text: #f5dd97;
        --st-shadow-glow-aqi-moderate: 0 0 8px rgba(232, 187, 58, 0.4), 0 0 18px rgba(232, 187, 58, 0.24);

        --st-color-aqi-usg-bg: #2e2015;
        --st-color-aqi-usg-border: #e8873a;
        --st-color-aqi-usg-text: #f5c79a;

        --st-color-aqi-unhealthy-bg: #2b1614;
        --st-color-aqi-unhealthy-border: #e0564a;
        --st-color-aqi-unhealthy-text: #f5b7b0;
        --st-shadow-glow-aqi-unhealthy: 0 0 8px rgba(224, 86, 74, 0.45), 0 0 18px rgba(224, 86, 74, 0.28);

        --st-color-aqi-very-unhealthy-bg: #a35bab;
        --st-color-aqi-very-unhealthy-text: #10161c;

        --st-color-aqi-hazardous-bg: #a3324f;
        --st-color-aqi-hazardous-text: #10161c;
    }
}