/* ============================================================
   merchant-vars.css
   CSS custom properties and design tokens for the BuyUSAFirst
   merchant / admin shell. Load this FIRST — before all other
   merchant-* files so variables are available when parsed.
   ============================================================ */

.jcrec-admin {
  /* ── Header heights ── */
  --bu-header-height-tall:  70px;
  --bu-header-height-tight: 44px;
  --bu-header-height: var(--bu-header-height-tall);

  /* ── Sidebar dimensions (inherit from ui-kit vars with fallbacks) ── */
  --bu-sidebar-width:           var(--pa-sidebar-width,            260px);
  --bu-sidebar-collapsed-width: var(--pa-sidebar-collapsed-width,   60px);
  --bu-sidebar-scroll-btn-size: var(--pa-sidebar-scroll-btn-size,   24px);
  --bu-sidebar-scroll-btn-edge: var(--pa-sidebar-scroll-btn-edge,    6px);
  --bu-sidebar-scroll-up-offset:var(--pa-sidebar-scroll-up-offset,   6px);
  --bu-sidebar-scroll-step:     var(--pa-sidebar-scroll-step,      140px);

  /* ── Colours ── */
  --bu-primary:      var(--primary-blue,      #0075B2);
  --bu-primary-dark: var(--primary-blue-dark, #005A8B);
  --bu-accent:       var(--primary-red,       #E21F26);
  --bu-bg:           var(--bg-color,          #EEF2F6);
  --bu-text:         var(--text-main,         #3F4B59);

  /* ── Base typography ── */
  font-size: 13px !important;
  display: block !important;
}

/* Header height variants (applied as extra body class) */
.jcrec-admin.header-variant-tight {
  --bu-header-height: var(--bu-header-height-tight);
}
.jcrec-admin.header-variant-tall {
  --bu-header-height: var(--bu-header-height-tall);
}