:root {
  --ba-color-primary: #6c5ce7;
  --ba-color-primary-2: #8068ff;
  --ba-color-accent: #ffb703;
  --ba-color-ink: #23140f;
  --ba-color-text: #4d4038;
  --ba-color-muted: #8a7a70;
  --ba-color-line: rgba(35, 20, 15, 0.10);
  --ba-color-bg: #f6f7fb;
  --ba-color-warm: #fff8ee;
  --ba-color-card: rgba(255,255,255,0.86);
  --ba-space-1: 4px; --ba-space-2: 8px; --ba-space-3: 12px; --ba-space-4: 16px;
  --ba-space-5: 20px; --ba-space-6: 24px; --ba-space-8: 32px; --ba-space-10: 40px;
  --ba-radius-sm: 8px; --ba-radius-md: 14px; --ba-radius-lg: 22px; --ba-radius-xl: 30px; --ba-radius-pill: 999px;
  --ba-shadow-soft: 0 14px 35px rgba(35,20,15,0.10);
  --ba-shadow-card: 0 18px 45px rgba(35,20,15,0.14);
  --ba-font-title: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ba-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ba-header-h-desktop: 72px;
  --ba-header-h-mobile: 72px;
  --ba-tabbar-h-mobile: 74px;
  --ba-z-header: 800;
  --ba-z-tabbar: 900;
  --ba-z-modal: 1000;

  /* Phase 5.6 Step 5: Mobile navigation component tokens */
  --ba-mobile-nav-bg: rgba(255,255,255,0.96);
  --ba-mobile-nav-border: rgba(35,20,15,0.08);
  --ba-mobile-nav-text: #374151;
  --ba-mobile-nav-muted: #6b7280;
  --ba-mobile-nav-active: #6c5ce7;
  --ba-mobile-nav-active-soft: rgba(108,92,231,0.12);
  --ba-mobile-nav-shadow: 0 18px 42px rgba(31,41,55,0.18);
  --ba-mobile-nav-search-shadow: 0 16px 30px rgba(108,92,231,0.34);
}


/* Phase 5.6 Step 7: Mobile page visual polish tokens */
:root {
  --ba-mobile-page-max: 560px;
  --ba-mobile-page-pad-x: 18px;
  --ba-mobile-page-radius: 30px;
  --ba-mobile-page-card-bg: rgba(255,255,255,0.88);
  --ba-mobile-page-soft-bg: linear-gradient(135deg, #fff7ea 0%, #fffaf5 52%, #f1f7ff 100%);
  --ba-mobile-page-shadow: 0 18px 48px rgba(76,52,28,0.12);
  --ba-mobile-kicker: #9a6d32;
  --ba-mobile-ink: #23140f;
  --ba-mobile-muted: #74685f;
}