/* Design tokens. Dark is the default; light follows the system preference unless the user picked a
   theme with data-theme. Sizes are in rem (1rem = 16px); px only for hairlines. Contrast results:
   docs/ux.md, regenerated by tools/contrast.mjs. Fira is self-hosted (web/fonts/, OFL). */

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fira-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-code-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-code-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  --color-bg: #0c0d17;
  --color-surface: #151622;
  --color-surface-2: #1d2036;
  --color-text: #eef1f8;
  --color-text-muted: #a4adc4;
  --color-border: rgb(255 255 255 / 0.08);
  --color-border-strong: #5b6388;
  --color-accent: #4da3ff;
  --color-accent-text: #0c0d17;
  --color-cta: #4da3ff;
  --color-cta-text: #0c0d17;
  --color-focus: #4da3ff;
  --color-focus-halo: #0c0d17;
  --color-warn: #ff8a4c;
  --color-error: #ff6b57;
  --color-error-bg: #2d1216;
  --color-caveat-bg: rgb(255 138 76 / 0.12);
  --color-caveat-text: #eef1f8;
  --color-caveat-border: #ff8a4c;
  --color-badge-bg: #eef1f8;
  --color-badge-text: #0c0d17;
  --topbar-bg: #0c0d17;
  --topbar-text: #eef1f8;
  --topbar-muted: #a4adc4;
  --topbar-border: #5b6388;
  --topbar-focus: #4da3ff;
  --topbar-focus-halo: #0c0d17;
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --scrim: rgb(5 6 12 / 0.55);

  /* Viridis resampled from 0.14 to 1.0 so the lowest class stays visible on the deep ground. */
  --bin-0: #6a176e;
  --bin-1: #972766;
  --bin-2: #c33b4f;
  --bin-3: #e55c30;
  --bin-4: #f8890c;
  --bin-5: #fbbe23;
  --bin-6: #f2f27d;
  --bin-0-text: #ffffff;
  --bin-1-text: #ffffff;
  --bin-2-text: #ffffff;
  --bin-3-text: #0b0c14;
  --bin-4-text: #0b0c14;
  --bin-5-text: #0b0c14;
  --bin-6-text: #0b0c14;
  --cell-edge: rgb(255 255 255 / 0.14);

  --nodata-bg: #1d2036;
  --nodata-stripe: #6b7490;
  --nodata-text: #a4adc4;

  /* Lightness-reversed: the median is a dark neutral and cells get lighter as they depart from it. */
  --div-above-5: #fee6a8;
  --div-above-4: #fdb863;
  --div-above-3: #e08214;
  --div-above-2: #b35806;
  --div-above-1: #7a3d12;
  --div-center: #2b3048;
  --div-below-1: #4b3f9e;
  --div-below-2: #6e63c0;
  --div-below-3: #9a8fe0;
  --div-below-4: #c4bdf0;
  --div-below-5: #e6e2fa;
  --div-above-5-text: #0b0c14;
  --div-above-4-text: #0b0c14;
  --div-above-3-text: #0b0c14;
  --div-above-2-text: #ffffff;
  --div-above-1-text: #ffffff;
  --div-center-text: #ffffff;
  --div-below-1-text: #ffffff;
  --div-below-2-text: #ffffff;
  --div-below-3-text: #0b0c14;
  --div-below-4-text: #0b0c14;
  --div-below-5-text: #0b0c14;
  --div-center-ring: #5b6388;

  --series-modis: #a78bfa;
  --series-viirs: #ff8a4c;
  --series-harmonized: #fbba1f;
  --series-era-line: #a4adc4;
  --series-live: #ff8a4c;

  /* Calendar density: 7 classes. Bin 0 is "zero detections" (raw count is 0), bins 1-6 are log
     (base 4) classes of fire-cell-days per 1,000 grid cells in the AOI: 1-3, 4-15, 16-63, 64-255,
     256-1023, 1024+. A positive density below 1 falls in bin 1, never in bin 0. */
  --nodata-hatch: repeating-linear-gradient(135deg, var(--nodata-stripe) 0 1px, var(--nodata-bg) 1px 0.4rem);

  --series-modis-dash: none;
  --series-viirs-dash: 0.5rem 0.25rem;
  --series-harmonized-dash: none;

  /* Spacing, type, shape. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pill: 62rem;
  --radius-cell: 0.3125rem;
  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-kpi: 2rem;
  --cell-size: 2rem;
  --cell-size-phone: 1.625rem;
  --page-max: 90rem;
  --target-min: 2.75rem;
  --focus-width: 2px;
  --focus-offset: 2px;
  /* Stacking scale. Leaflet's panes (z-index 200-1000) live inside .map-canvas, which isolates them. */
  --z-map: 1;
  --z-sticky: 100;
  --z-sheet: 300;
  --z-popover: 350;
  --z-map-full: 380;
  --z-drawer: 400;
  --z-toast: 600;
  /* Reference only: custom properties cannot be used inside @media conditions, so the
     stylesheets must repeat these two values literally. */
  --bp-phone: 40rem;
  --bp-desktop: 64rem;
    --color-raised: #23263f;
    --color-accent-soft: rgb(77 163 255 / 0.16);
    --color-fire: #ff8a4c;
    --color-fire-soft: rgb(255 138 76 / 0.14);
    --color-highlight: #fbba1f;
    --color-synth: #b83a00;
    --color-synth-text: #ffffff;
    --glow-a: rgb(77 163 255 / 0.18);
    --glow-b: rgb(246 128 19 / 0.12);
    --glow-cell: rgb(251 186 31 / 0.40);
    --shadow-overlay: 0 1.5rem 4rem rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-panel: -1.5rem 0 3rem -1.5rem rgb(0 0 0 / 0.5);
    --sensor-modis: #a78bfa;
    --sensor-viirs: #ff8a4c;
    --sensor-harm: #fbba1f;
    --bar: #3a4266;
    --bar-sel: #4da3ff;
    --current: #4da3ff;

  /* Design 3: shape, motion. Exits are shorter than entries (Material 3 emphasized easing). */
  --radius-ctl: 0.75rem;
  --radius-card: 1.25rem;
  --radius-sheet: 1.75rem;
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 360ms;
  --dur-5: 480ms;
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --topbar-h: 4rem;
  --panel-w: 26rem;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --color-bg: #eef1f8;
    --color-surface: #ffffff;
    --color-surface-2: #f3f5fa;
    --color-text: #151622;
    --color-text-muted: #454d66;
    --color-border: rgb(21 22 34 / 0.10);
    --color-border-strong: #6b7490;
    --color-accent: #0050d8;
    --color-accent-text: #ffffff;
    --color-cta: #0050d8;
    --color-cta-text: #ffffff;
    --color-focus: #0050d8;
    --color-focus-halo: #ffffff;
    --color-warn: #a33500;
    --color-error: #a4161a;
    --color-error-bg: #fdecec;
    --color-caveat-bg: rgb(194 65 12 / 0.08);
    --color-caveat-text: #151622;
    --color-caveat-border: #a33500;
    --color-badge-bg: #151622;
    --color-badge-text: #ffffff;
    --topbar-bg: #eef1f8;
    --topbar-text: #151622;
    --topbar-muted: #454d66;
    --topbar-border: #6b7490;
    --topbar-focus: #0050d8;
    --topbar-focus-halo: #ffffff;
    --shadow-card: 0 1px 2px rgb(21 22 34 / 0.05);
    --scrim: rgb(21 22 34 / 0.32);

    --bin-0: #160b39;
    --bin-1: #4f0d6c;
    --bin-2: #85216b;
    --bin-3: #bc3754;
    --bin-4: #e65d2f;
    --bin-5: #fb9606;
    --bin-6: #f6d746;
    --bin-0-text: #ffffff;
    --bin-1-text: #ffffff;
    --bin-2-text: #ffffff;
    --bin-3-text: #ffffff;
    --bin-4-text: #000000;
    --bin-5-text: #000000;
    --bin-6-text: #000000;
    --cell-edge: #6b7490;

    --nodata-bg: #e4e8f2;
    --nodata-stripe: #6b7490;
    --nodata-text: #151622;

    /* ColorBrewer PuOr 11, untouched. */
    --div-above-5: #7f3b08;
    --div-above-4: #b35806;
    --div-above-3: #e08214;
    --div-above-2: #fdb863;
    --div-above-1: #fee0b6;
    --div-center: #f7f7f7;
    --div-below-1: #d8daeb;
    --div-below-2: #b2abd2;
    --div-below-3: #8073ac;
    --div-below-4: #542788;
    --div-below-5: #2d004b;
    --div-above-5-text: #ffffff;
    --div-above-4-text: #ffffff;
    --div-above-3-text: #000000;
    --div-above-2-text: #000000;
    --div-above-1-text: #000000;
    --div-center-text: #000000;
    --div-below-1-text: #000000;
    --div-below-2-text: #000000;
    --div-below-3-text: #000000;
    --div-below-4-text: #ffffff;
    --div-below-5-text: #ffffff;
    --div-center-ring: transparent;

    --series-modis: #6d4fc4;
    --series-viirs: #c2410c;
    --series-harmonized: #151622;
    --series-era-line: #454d66;
    --series-live: #c2410c;
    --color-raised: #ffffff;
    --color-accent-soft: rgb(0 80 216 / 0.10);
    --color-fire: #a33500;
    --color-fire-soft: rgb(194 65 12 / 0.10);
    --color-highlight: #a33500;
    --glow-a: rgb(0 80 216 / 0.10);
    --glow-b: rgb(246 128 19 / 0.08);
    --glow-cell: transparent;
    --shadow-overlay: 0 1.5rem 4rem rgb(21 22 34 / 0.18), 0 0 0 1px rgb(21 22 34 / 0.08);
    --shadow-panel: -1rem 0 2rem -1.5rem rgb(21 22 34 / 0.2);
    --sensor-modis: #6d4fc4;
    --sensor-viirs: #c2410c;
    --sensor-harm: #151622;
    --bar: #c3c9da;
    --bar-sel: #0050d8;
    --current: #0050d8;
  }
}

:root[data-theme="light"] {
    color-scheme: light;

    --color-bg: #eef1f8;
    --color-surface: #ffffff;
    --color-surface-2: #f3f5fa;
    --color-text: #151622;
    --color-text-muted: #454d66;
    --color-border: rgb(21 22 34 / 0.10);
    --color-border-strong: #6b7490;
    --color-accent: #0050d8;
    --color-accent-text: #ffffff;
    --color-cta: #0050d8;
    --color-cta-text: #ffffff;
    --color-focus: #0050d8;
    --color-focus-halo: #ffffff;
    --color-warn: #a33500;
    --color-error: #a4161a;
    --color-error-bg: #fdecec;
    --color-caveat-bg: rgb(194 65 12 / 0.08);
    --color-caveat-text: #151622;
    --color-caveat-border: #a33500;
    --color-badge-bg: #151622;
    --color-badge-text: #ffffff;
    --topbar-bg: #eef1f8;
    --topbar-text: #151622;
    --topbar-muted: #454d66;
    --topbar-border: #6b7490;
    --topbar-focus: #0050d8;
    --topbar-focus-halo: #ffffff;
    --shadow-card: 0 1px 2px rgb(21 22 34 / 0.05);
    --scrim: rgb(21 22 34 / 0.32);

    --bin-0: #160b39;
    --bin-1: #4f0d6c;
    --bin-2: #85216b;
    --bin-3: #bc3754;
    --bin-4: #e65d2f;
    --bin-5: #fb9606;
    --bin-6: #f6d746;
    --bin-0-text: #ffffff;
    --bin-1-text: #ffffff;
    --bin-2-text: #ffffff;
    --bin-3-text: #ffffff;
    --bin-4-text: #000000;
    --bin-5-text: #000000;
    --bin-6-text: #000000;
    --cell-edge: #6b7490;

    --nodata-bg: #e4e8f2;
    --nodata-stripe: #6b7490;
    --nodata-text: #151622;

    /* ColorBrewer PuOr 11, untouched. */
    --div-above-5: #7f3b08;
    --div-above-4: #b35806;
    --div-above-3: #e08214;
    --div-above-2: #fdb863;
    --div-above-1: #fee0b6;
    --div-center: #f7f7f7;
    --div-below-1: #d8daeb;
    --div-below-2: #b2abd2;
    --div-below-3: #8073ac;
    --div-below-4: #542788;
    --div-below-5: #2d004b;
    --div-above-5-text: #ffffff;
    --div-above-4-text: #ffffff;
    --div-above-3-text: #000000;
    --div-above-2-text: #000000;
    --div-above-1-text: #000000;
    --div-center-text: #000000;
    --div-below-1-text: #000000;
    --div-below-2-text: #000000;
    --div-below-3-text: #000000;
    --div-below-4-text: #ffffff;
    --div-below-5-text: #ffffff;
    --div-center-ring: transparent;

    --series-modis: #6d4fc4;
    --series-viirs: #c2410c;
    --series-harmonized: #151622;
    --series-era-line: #454d66;
    --series-live: #c2410c;
    --color-raised: #ffffff;
    --color-accent-soft: rgb(0 80 216 / 0.10);
    --color-fire: #a33500;
    --color-fire-soft: rgb(194 65 12 / 0.10);
    --color-highlight: #a33500;
    --glow-a: rgb(0 80 216 / 0.10);
    --glow-b: rgb(246 128 19 / 0.08);
    --glow-cell: transparent;
    --shadow-overlay: 0 1.5rem 4rem rgb(21 22 34 / 0.18), 0 0 0 1px rgb(21 22 34 / 0.08);
    --shadow-panel: -1rem 0 2rem -1.5rem rgb(21 22 34 / 0.2);
    --sensor-modis: #6d4fc4;
    --sensor-viirs: #c2410c;
    --sensor-harm: #151622;
    --bar: #c3c9da;
    --bar-sel: #0050d8;
    --current: #0050d8;
}

:root { --motion: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0s; }
}