/* Hale's web tokens. Taken from the app, not invented:
 * - band hues are Severity.tint in Hale/Views/Theme.swift (the EPA's, one
 *   step lighter); they appear only where they mean a band.
 * - the teal is the app's AccentColor; the deep ink is the app icon's ground.
 * - display type is SF Pro Rounded where the browser exposes it (ui-rounded,
 *   Safari), else Nunito, self-hosted so no visitor's IP goes to a font CDN. */

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --band-good: #34d264;
  --band-moderate: #f2d03a;
  --band-sensitive: #ff8a3d;
  --band-unhealthy: #ff5a52;
  --band-very: #a96fd0;
  --band-hazardous: #8e3a3f;

  --bg: #eef3f2;
  --surface: #ffffff;
  --ink: #0a1e25;
  --ink-2: #45585e;
  --ink-3: #5f7277;
  --line: rgb(10 30 37 / 0.12);
  --accent: #0f7380;          /* links and text: AA on --bg */
  --accent-fill: #157c89;     /* filled controls under white text */
  --on-accent: #ffffff;
  --deep: #06202e;            /* the icon's ground; the privacy band */
  --deep-ink: #e4f0ef;
  --glass: rgb(255 255 255 / 0.62);
  --glass-solid: rgb(255 255 255 / 0.9);   /* glass over busy content: blur alone lets digits through */
  --glass-edge: rgb(255 255 255 / 0.75);
  --shadow: 0 1px 2px rgb(10 30 37 / 0.06), 0 12px 32px -8px rgb(10 30 37 / 0.18), 0 40px 80px -24px rgb(10 30 37 / 0.22);
  --widget-ground: #ffffff;

  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lede: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --text-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.75rem, 1.4rem + 5.2vw, 5.75rem);
  --text-number: clamp(4.25rem, 3rem + 5vw, 6.75rem);

  --space-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --measure: 34rem;
  --page: 74rem;

  --radius-card: 30px;
  --radius-pill: 999px;

  --duration-fast: 180ms;
  --duration-air: 1200ms;     /* the app's Atmosphere animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #061a22;
    --surface: #0c2630;
    --ink: #e4eeee;
    --ink-2: #a5b8bb;
    --ink-3: #8ea3a7;
    --line: rgb(228 238 238 / 0.12);
    --accent: #5cc8cc;
    --accent-fill: #4dbdc2;
    --on-accent: #04161c;
    --deep: #020f15;
    --glass: rgb(12 38 48 / 0.62);
    --glass-solid: rgb(12 38 48 / 0.92);
    --glass-edge: rgb(255 255 255 / 0.09);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -8px rgb(0 0 0 / 0.45), 0 40px 80px -24px rgb(0 0 0 / 0.6);
    --widget-ground: #1c1c1e;
  }
}