/* Bank of Better design tokens.
 *
 * The real design references these via the Claude Design "DesignSync" bundle
 * (_ds/.../tokens/*.css). That bundle is not available when self-hosting from
 * the Go server, so we reconstruct the exact token set the design consumes —
 * every var(--token) the .dc.html uses is defined here. Values are derived from
 * the literal colors the design also hardcodes (e.g. #12223c navy, #d22026 red)
 * so the var() paths and the hardcoded paths stay visually identical.
 *
 * Fonts: the design's Montserrat .otf files are binary and could not be
 * transferred from DesignSync. We fall back to Google Fonts (local demo, CDN is
 * fine) so type still renders correctly. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Montserrat+Alternates:wght@100..900&family=Archivo:wght@400..800&display=swap');

:root {
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* brand */
  --bob-ink: #12223c;
  --bob-white: #ffffff;
  --bob-red: #d22026;
  --bob-blue: #2190d6;
  --bob-gold: #ffb800;
  --navy-800: #12223c;

  /* surfaces & lines */
  --surface-tint: #f3f6fa;
  --border-subtle: #e6eaf0;
  --border-default: #d4dae3;
  --neutral-300: #c8d0db;

  /* text */
  --text-secondary: #45526a;
  --text-muted: #6b7688;

  /* status */
  --status-success: #2e7d46;

  /* effects */
  --shadow-xs: 0 1px 2px rgba(18, 34, 60, 0.08);
}