/* City Viewer — theme tokens (from the design project's css-plan).
   Semantic names sit on top of the Auburn brand palette (colors_and_type.css is loaded first;
   hex fallbacks match the real brand values so a missed stylesheet degrades on-brand). Everything
   downstream reads these — no raw hex in component files. A facility-type theme (e.g. Parks green)
   can re-point --brand without touching components. */

:root {
  /* Semantic theme */
  --brand: var(--auburn-navy, #22326E);
  --accent: var(--auburn-orange, #EB5F2E);
  --success: var(--auburn-dark-green, #12703C);
  --success-bg: #d4edda;
  --warning-bg: #fdeecb;
  --info-bg: #dfe9f3;
  /* No red exists in the Auburn brand palette — matches the dark red already used inline for
     errors/destructive actions (.fv-error, forms.css .is-danger) rather than inventing a new one. */
  --danger: #8a1c1c;
  --danger-bg: #fdecea;

  /* NOTE: --bg deliberately SHADOWS the branding stylesheet's --bg (white there). Here it is
     the css-plan's "app base" (warm tan); white surfaces read --surface. Anything mapping onto
     branding's --bg inside this app must use --surface instead (see app.css --fv-surface). */
  --bg: #F6F5F0;               /* app base surface */
  --surface: #ffffff;
  --ink: #1A1F33;
  --ink-muted: var(--auburn-gray, #65695A);
  --ink-on-brand: #ffffff;
  --line: #E2E1DA;
  --line-soft: #ECEAE2;

  /* Type */
  --font-mono: ui-monospace, Menlo, monospace;

  /* Shape & elevation (navy-tinted shadows, never black) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 4px rgba(10, 20, 40, .18);
  --shadow-md: 0 1px 3px rgba(10, 20, 40, .12);
  --shadow-sheet: 0 -6px 24px rgba(10, 20, 40, .16);
  --shadow-drawer: -8px 0 32px rgba(10, 20, 40, .3);
  --scrim: rgba(10, 20, 40, .45);

  /* Motion — calm, civic */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Spacing (4pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Hit targets */
  --tap-min: 44px;
}