/* River Rat design tokens — single source of truth for color + scale.
   Mirrors montana-flows-mobile DESIGN_SYSTEM.md §10.2. Light is the default;
   [data-theme="dark"] overrides. Aliases keep legacy WPA var names resolving
   to theme-aware tokens so the bulk of styles.css needs no per-line edits. */
:root {
  /* App color tokens (§10.2) */
  --color-background: #f2f2f7; --color-surface: #ffffff; --color-surface-subtle: #f9f9fb;
  --color-border: #c6c6c8;
  --color-text-primary: #000000; --color-text-secondary: #8e8e93; --color-text-tertiary: #3a3a3c;
  --color-accent: #007aff;
  --color-flow-green: #30d158; --color-flow-yellow: #ffd60a; --color-flow-orange: #FF9F0A; --color-flow-red: #ff453a;
  /* Status-badge text (light; §2.3) */
  --badge-text-green: #248a3d; --badge-text-yellow: #b8860b; --badge-text-red: #ff3b30; --badge-text-gray: #8e8e93;

  /* System font */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Geometric scale (kept from the existing site so nothing reflows;
     --r-lg bumped 8px -> 16px for the app card radius). */
  --fs-banner: 3rem; --fs-hero: 5.5rem; --fs-h1: 2.5rem; --fs-h2: 1.625rem; --fs-h3: 1rem;
  --fs-stamp: 1rem; --fs-lede: 1.25rem; --fs-body: 1rem; --fs-meta: 0.875rem; --fs-caption: 0.75rem;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
  --r-sm: 2px; --r-md: 6px; --r-lg: 16px; --r-stamp: 12px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);

  /* Theme-aware aliases — unambiguous WPA chrome/text vars -> app tokens.
     (Status colors --forest/--rust/--mustard/--river-blue are intentionally
     NOT aliased; they are dual-meaning and edited per selector in later tasks.) */
  --paper: var(--color-background); --paper-warm: var(--color-background); --paper-edge: var(--color-surface-subtle);
  --surface: var(--color-surface); --cream: var(--color-surface);
  --ink: var(--color-text-primary); --ink-muted: var(--color-text-secondary); --ink-faint: var(--color-text-tertiary);
  --rule: var(--color-border);
  --font-display: var(--font-system); --font-body: var(--font-system); --font-numerals: var(--font-system);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
}

[data-theme="dark"] {
  --color-background: #0a0f1e; --color-surface: #141c2f; --color-surface-subtle: #0f1828;
  --color-border: #1e2d47;
  --color-text-primary: #e8f4fd; --color-text-secondary: #5b8db8; --color-text-tertiary: #cde4f7;
  --color-accent: #7ec8e3;
  --color-flow-green: #34d399; --color-flow-yellow: #fbbf24; --color-flow-orange: #fb923c; --color-flow-red: #f87171;
  /* Dark badge text: bright dark-flow tokens clear AA (~6.7:1) on #141c2f. */
  --badge-text-green: #34d399; --badge-text-yellow: #fbbf24; --badge-text-red: #f87171; --badge-text-gray: #8e9bb5;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
}

.theme-toggle {
  appearance: none; cursor: pointer; width: 40px; height: 26px; border-radius: 999px;
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1;
}
.theme-toggle:hover { color: var(--color-text-primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }