/* Team AlUla × E1 × WATR — Environmental Monitoring
   Design tokens v4 · Team AlUla brand + homepage colours, light mode
   Helvetica is a system font: no web-font loading needed. */

:root {
  /* ── Colour · brand ─────────────────────────────────────── */
  --color-primary:      #305038;  /* logo green: selected states, links, focus, chart line, buttons (9.0:1 on white) */
  --color-on-primary:   #ffffff;
  --color-primary-tint: rgba(48, 80, 56, .12);

  /* ── Colour · homepage palette ──────────────────────────── */
  --color-slate-dark:   #233537;  /* body text, map frame (12.8:1 on white) */
  --color-teal-dark:    #3D5F65;  /* secondary text, captions, ticks (6.9:1 on white) */
  --color-slate-light:  #819CA1;  /* decorative only (2.9:1 — not for text) */
  --color-gainsboro:    #CFDDDB;  /* selected ring on the map, chart bands */
  --color-stone:        #D8D6CF;  /* race-day band; panels derive from it */
  --color-grey:         #9EA39B;  /* no-deployment state (non-text) */

  /* ── Roles ──────────────────────────────────────────────── */
  --color-background: #ffffff;
  --color-panel:      #F3F2EF;  /* stone at ~30%: event card, strip cards, chart card */
  --color-text:       var(--color-slate-dark);
  --color-text-2:     var(--color-teal-dark);
  --color-line:        rgba(35, 53, 55, .16);
  --color-line-strong: rgba(35, 53, 55, .32);
  --color-skeleton:    rgba(35, 53, 55, .08);

  /* ── Event states ───────────────────────────────────────── */
  /* Pins sit on satellite imagery, so they stay light */
  --pin-captured: #ffffff;             /* filled, slate keyline */
  --pin-upcoming: #ffffff;             /* hollow ring */
  --pin-none:     var(--color-grey);   /* + slash */
  --pin-selected-ring: var(--color-gainsboro);
  /* Chip dots sit on white/panel */
  --chip-captured: var(--color-slate-dark);
  --chip-upcoming: var(--color-slate-dark); /* ring */
  --chip-none:     var(--color-grey);

  /* ── Chart ──────────────────────────────────────────────── */
  --chart-line:   var(--color-primary);
  --chart-area:   rgba(48, 80, 56, .10);
  --chart-grid:   rgba(35, 53, 55, .07);
  --chart-median: rgba(35, 53, 55, .40);
  --band-setup:   rgba(207, 221, 219, .25);
  --band-day1:    rgba(207, 221, 219, .55);
  --band-race:    rgba(216, 214, 207, .75);

  /* ── Type ───────────────────────────────────────────────── */
  --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 700 */
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif; /* 400 / 700 */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 17px;  --fs-xl: 19px; --fs-kpi: 24px; --fs-2xl: 32px; --fs-3xl: 35px;
  --ls-caps: .1em;

  /* ── Space ──────────────────────────────────────────────── */
  --section-gap: 80px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-9: 64px;
  --gutter: 64px;

  /* ── Radius, shadow, motion ─────────────────────────────── */
  --radius-sm:   6px;   /* tooltips, map labels */
  --radius-md:  10px;   /* KPI tiles, inputs, buttons */
  --radius-lg:  14px;   /* strip cards, panels inside cards */
  --radius-xl:  16px;   /* map, event card, chart card */
  --radius-pill: 999px; /* status chips, season dropdown */
  --card-shadow: 0 4px 20px rgba(35, 53, 55, .08);
  --hover-duration: .2s;
  --fly-duration: 1.1s;

  /* ── Layout ─────────────────────────────────────────────── */
  --card-w: 456px; --map-h: 524px; --chart-h: 300px; --tap-min: 44px;
}

@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 760px) {
  :root { --gutter: 16px; --section-gap: 48px; --fs-kpi: 22px; --fs-2xl: 26px; --fs-3xl: 27px; --map-h: 320px; --chart-h: 220px; }
}
@media (prefers-reduced-motion: reduce) { :root { --hover-duration: 0s; --fly-duration: 0s; } }