/* BidClarity design tokens — ONE PORTAL phase 0 (2026-09-28).
   Source: design-spec/05-visual-system.md + mockups/tokens.css (approved @ 9714018), copied verbatim below.
   Loaded before each page's own CSS; existing page variables map onto these (see the page's :root). */
:root {
  /* brand (CLAUDE.md) */
  --bc-teal-700: #007A62;
  --bc-teal-500: #00D4AA;
  --bc-teal-200: #A6E9D6;
  --bc-teal-50:  #E8F8F3;
  --bc-amber-700: #9B5408;
  --bc-amber-200: #F3D4A8;
  --bc-amber-50:  #FFF6E8;
  --bc-red-700: #B91C1C;
  --bc-red-200: #F5C2C2;
  --bc-red-50:  #FEF2F2;
  --bc-green-700: #1E6B3A;
  --bc-green-200: #B7DFC4;
  --bc-green-50:  #EAF6EE;
  --bc-blue-700: #1A5FA8;
  --bc-blue-200: #BCD3F0;
  --bc-blue-50:  #EEF4FC;

  /* ink */
  --bc-ink-900: #0B1524;
  --bc-ink-700: #2B3A4E;
  --bc-ink-500: #5B6B7F;
  --bc-ink-400: #8A97A8;
  --bc-ink-200: #D7DEE7;
  --bc-ink-100: #EDF1F5;
  --bc-ink-50:  #F6F8FA;
  --bc-white:   #FFFFFF;

  /* semantic surfaces */
  --bc-bg: var(--bc-ink-50);
  --bc-surface: var(--bc-white);
  --bc-border: var(--bc-ink-200);
  --bc-text: var(--bc-ink-900);
  --bc-text-body: var(--bc-ink-700);
  --bc-text-muted: var(--bc-ink-500);
  --bc-text-faint: var(--bc-ink-400);
  --bc-link: var(--bc-teal-700);
  --bc-focus: var(--bc-teal-700);

  /* type */
  --bc-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bc-text-xs: 12px; --bc-lh-xs: 16px;
  --bc-text-sm: 13px; --bc-lh-sm: 18px;
  --bc-text-md: 14px; --bc-lh-md: 20px;
  --bc-text-lg: 16px; --bc-lh-lg: 24px;
  --bc-title-sm: 18px; --bc-lh-title-sm: 24px;
  --bc-title-md: 22px; --bc-lh-title-md: 28px;
  --bc-display: 28px; --bc-lh-display: 34px;
  --bc-w-regular: 400; --bc-w-medium: 500; --bc-w-semibold: 600;

  /* space (4-based) */
  --bc-space-0-5: 2px; --bc-space-1: 4px; --bc-space-2: 8px; --bc-space-3: 12px; --bc-space-4: 16px;
  --bc-space-5: 20px; --bc-space-6: 24px; --bc-space-8: 32px; --bc-space-10: 40px; --bc-space-12: 48px; --bc-space-16: 64px;

  /* radius */
  --bc-radius-sm: 6px; --bc-radius-md: 10px; --bc-radius-lg: 14px; --bc-radius-pill: 999px;

  /* elevation */
  --bc-shadow-1: 0 1px 2px rgba(11,21,36,.05), 0 2px 8px rgba(11,21,36,.05);
  --bc-shadow-2: 0 4px 16px rgba(11,21,36,.10), 0 1px 3px rgba(11,21,36,.06);
  --bc-shadow-3: 0 16px 48px rgba(11,21,36,.18), 0 2px 8px rgba(11,21,36,.08);

  /* layout */
  --bc-rail-w: 248px; --bc-rail-collapsed: 64px; --bc-topbar-h: 56px; --bc-bottombar-h: 56px;
  --bc-content-max: 1280px; --bc-gutter: 24px; --bc-inspector-w: 360px;

  /* motion */
  --bc-ease: cubic-bezier(.2,.7,.2,1); --bc-dur-1: 120ms; --bc-dur-2: 200ms; --bc-dur-3: 320ms;
}
@media (max-width: 767px) { :root { --bc-gutter: 16px; } }
@media (prefers-reduced-motion: reduce) { :root { --bc-dur-1: 0ms; --bc-dur-2: 0ms; --bc-dur-3: 0ms; } }