/* Rivers site design tokens — the single place this site decides how to spend
   the Plastic Bank brand.
 *
 * Load order matters: brand-tokens.css defines the `--pb-*` palette, this file
 * maps it onto `--rv-*` roles, and page CSS only ever reads `--rv-*`.
 *
 *   <link rel="stylesheet" href="styles/brand-tokens.css">
 *   <link rel="stylesheet" href="styles/site-tokens.css">
 *
 * Do not write a raw hex in this file. Pick the palette colour you need, and if
 * the palette has no step for it, that is a brand team question
 * (brand@plasticbank.com) rather than a build-time decision. The
 * `plastic-bank-brand` skill has the full rules, and
 * `node scripts/check-brand-palette.mjs` fails on an off-palette value.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────────
     The defaults below are the brand's dark theme, which every page uses. The
     homepage alternates into the light theme per section via `.section--light`,
     which re-scopes these same tokens — see the `<style>` block in index.html.
     S-1 is the palette's only dark blue, so a section that needs to differ from
     its neighbour changes theme rather than reaching for a second dark. */
  --rv-surface: var(--pb-color-s1);

  /* ── Text ─────────────────────────────────────────────────────────────────
     The brand's dark-theme mapping: white body copy, S-4 for anything
     secondary. */
  --rv-text: var(--pb-color-white);
  --rv-text-muted: var(--pb-color-s4);

  /* ── Accents ──────────────────────────────────────────────────────────────
     Primary palette colours accent this site; they never fill a page. */
  --rv-accent: var(--pb-color-p1);
  --rv-accent-hover: var(--pb-color-p2);

  /* ── Actions ──────────────────────────────────────────────────────────────
     S-2 is the lightest palette blue that carries white text (4.59:1). The
     hover moves up to P-1, which carries S-1 text rather than white — no
     primary colour passes with white on it. */
  --rv-action: var(--pb-color-s2);
  --rv-action-hover: var(--pb-color-p1);

  /* ── Status ───────────────────────────────────────────────────────────────
     T-2 marks the highest-emission rivers. Tertiary colours are alert-only in
     the brand system, which is what a pollution ranking is. */
  --rv-success: var(--pb-color-s7);
  --rv-alert: var(--pb-color-t2);

  /* ── Map ──────────────────────────────────────────────────────────────────
     The light basemap behind the interactive maps, and the three-step ramp for
     outfall markers and clusters. Ordered so marker colour tracks rank and
     every label and count keeps white or S-1 text above 4.5:1. */
  --rv-map-base: var(--pb-color-s9);
  --rv-map-rank-high: var(--pb-color-t2);
  --rv-map-rank-mid: var(--pb-color-s3);
  --rv-map-rank-low: var(--pb-color-s2);
  --rv-map-cluster: var(--pb-color-s1);

  /* ── Translucent surfaces ─────────────────────────────────────────────────
     Each composites a palette colour: S-1 at 60%, P-1 at 18%, and white at
     4%/8% for the glass edges, matching the brand's dark-theme border
     convention of white at low opacity. */
  --color-card-bg: rgba(0, 42, 61, 0.6);
  --color-card-border: rgba(58, 182, 198, 0.18);
  --color-glass-bg: rgba(255, 255, 255, 0.04);
  --color-glass-border: rgba(255, 255, 255, 0.08);

  /* Neutral depth shadows, deliberately not tinted with a brand colour. */
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 8px 28px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Signup CTA ───────────────────────────────────────────────────────────
     The recover-50-bottles band is always the brand's light mapping, even on
     dark pages. Google uses S-4 (mist); Apple Sign In requires black. Hover
     moves to the neighbouring palette colour, not a mixed shade. */
  --rv-cta-google-bg: var(--pb-color-s4);
  --rv-cta-google-hover: var(--pb-color-s9);
  --rv-cta-apple-bg: var(--pb-color-black);
  --rv-cta-apple-hover: var(--pb-color-s1);
  --rv-cta-apple-fg: var(--pb-color-white);
  --rv-cta-rule: var(--pb-color-s9);

  /* ── Non-colour tokens ────────────────────────────────────────────────────
     Type comes from the brand: Inter for body copy, and for headings too,
     since Proxima Nova needs an Adobe licence this site does not have. */
  --font-main: var(--pb-font-body);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  /* Action buttons use this corner, not the pill. It matches the member
     signup band (Continue with Google / Apple) used on plasticbank.com. */
  --radius-btn: var(--radius-md);
  /* Official lockup SVG includes the brand spacing guide, so the wordmark is
     only part of this box. 56px keeps width above the 80px digital minimum
     and reads larger than the nav links. */
  --rv-logo-height: 56px;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The signup band remaps the working --rv-* roles onto the brand's light
   theme so inner-page chrome (dark S-1) does not leak into the conversion
   block. Component CSS in signup-cta.css still reads --rv-* only. */
.pb-cta-section {
  --rv-surface: var(--pb-color-s10);
  --rv-text: var(--pb-color-s1);
  --rv-text-muted: var(--pb-color-s8);
  --rv-accent: var(--pb-color-s2);
  --rv-accent-hover: var(--pb-color-s1);
  --rv-action: var(--pb-color-s2);
  --rv-action-hover: var(--pb-color-s1);
}